怎么在SVG（可缩放矢量图形）这种XML中绘制图形_SVG XML基础语法与图形绘制教程-XML/RSS教程-PHP中文网

怎么在SVG（可缩放矢量图形）这种XML中绘制图形_SVG XML基础语法与图形绘制教程

月夜之吻

发布： 2025-10-30 09:55:01

原创

979人浏览过

掌握SVG需理解XML语法与关键标签，首先使用<svg>定义画布大小和坐标系，接着用<rect>、<circle>、<ellipse>、<line>、<polygon>、<polyline>和<path>绘制矩形、圆形、椭圆、直线、多边形、折线及复杂路径，通过fill、stroke、stroke-width等属性设置样式，并可直接嵌入HTML显示矢量图形。

怎么在svg（可缩放矢量图形）这种xml中绘制图形_svg xml基础语法与图形绘制教程

要在SVG中绘制图形，你不需要复杂的工具或编程语言，只需要掌握基本的XML语法和几个关键标签。SVG是基于文本的矢量图像格式，可以直接在HTML中使用，也可以单独保存为.svg文件。下面带你一步步了解如何用SVG XML语法绘制常见图形。

1. SVG 根元素与画布设置

所有SVG内容都必须包裹在 <svg> 标签内。这个标签定义了绘图区域（即“画布”）的大小和坐标系统。

width 和 height：设置画布宽高，例如 width="200" height="150"
viewBox：定义可视区域的坐标范围，如 "0 0 100 100"，有助于缩放适配
通常加上命名空间 xmlns="http://www.w3.org/2000/svg"（在独立文件中需要）

示例：

<svg width="200" height="150" xmlns="http://www.w3.org/2000/svg">
  <!-- 图形将写在这里 -->
</svg>

登录后复制

2. 绘制基本图形

SVG提供了多个标签用于创建基础形状，每个都有对应的属性来控制位置、大小和样式。

<rect> - 矩形

x, y：左上角坐标
width, height：宽高
rx, ry：可选，圆角半径

例子：

<rect x="10" y="10" width="80" height="50" fill="blue" />

登录后复制

<circle> - 圆形

cx, cy：圆心坐标
r：半径

例子：

<circle cx="50" cy="50" r="30" fill="red" />

登录后复制

<ellipse> - 椭圆

cx, cy：中心点
rx：x轴半径，ry：y轴半径

例子：

<ellipse cx="60" cy="40" rx="50" ry="30" fill="green" />

登录后复制

<line> - 直线

图像转图像AI

利用AI轻松变形、风格化和重绘任何图像

查看详情

x1, y1：起点
x2, y2：终点
stroke：线条颜色，stroke-width：线宽

例子：

<line x1="0" y1="0" x2="100" y2="100" stroke="black" stroke-width="2" />

登录后复制

<polygon> - 多边形

points：一系列 x,y 坐标对，用空格或逗号分隔

例子（三角形）：

<polygon points="50,10 90,90 10,90" fill="purple" />

登录后复制

<polyline> - 折线

类似 polygon，但不自动闭合路径

例子：

<polyline points="10,10 30,50 50,20 70,80" fill="none" stroke="blue" />

登录后复制

<path> - 路径（最强大）

d 属性：定义路径指令，如 M（移动）、L（直线）、C（贝塞尔曲线）、Z（闭合）等
适合绘制复杂形状

例子（简单路径）：

<path d="M10 10 L50 10 L50 50 Z" fill="orange" />

登录后复制

3. 设置图形样式

你可以通过以下属性给图形上色和描边：

fill：填充颜色（默认黑色）
stroke：边框颜色
stroke-width：边框粗细
支持颜色名称、十六进制（#ff0000）、RGB等

示例：

<rect x="20" y="20" width="60" height="40"
      fill="#00aaff" stroke="black" stroke-width="3" />

登录后复制

4. 在 HTML 中使用 SVG

可以直接把SVG代码嵌入HTML文件中，无需额外加载。

<!DOCTYPE html>
<html>
<body>
  <svg width="200" height="150" xmlns="http://www.w3.org/2000/svg">
    <circle cx="100" cy="75" r="50" fill="yellow" />
  </svg>
</body>
</html>

登录后复制

这样就能在网页中显示一个黄色的圆。

基本上就这些。掌握这几个标签和属性后，你就可以用纯文本方式创建清晰、可缩放的矢量图形了。SVG的优势在于无损缩放、文件小、易于修改，非常适合图标、图表和响应式设计。不复杂但容易忽略。

以上就是怎么在SVG（可缩放矢量图形）这种XML中绘制图形_SVG XML基础语法与图形绘制教程的详细内容，更多请关注php中文网其它相关文章！