SVG 标记元素

SVG（Scalable Vector Graphics）即可缩放矢量图形，是一种基于 XML 标记的格式化文档，可用于定义图形。

在 SVG 中，有许多标记元素用于绘制各种形状，例如线条、矩形、圆形等等。

下面是一些常见的 SVG 标记元素及其用法：

<rect>

用于绘制矩形，有以下属性：

• x 和 y：矩形左上角的坐标。
• width 和 height：矩形的宽度和高度。
• rx 和 ry：用于指定矩形的圆角半径（如果不需要圆角，可以省略这两个属性）。

示例代码：

<svg width="100" height="100">
  <rect x="10" y="10" width="80" height="80" rx="10" ry="10"/>
</svg>

<circle>

用于绘制圆形，有以下属性：

• cx 和 cy：圆心的坐标。
• r：圆的半径。

示例代码：

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40"/>
</svg>

<line>

用于绘制直线，有以下属性：

• x1 和 y1：起点坐标。
• x2 和 y2：终点坐标。
• stroke：线条颜色。
• stroke-width：线条粗细。

示例代码：

<svg width="100" height="100">
  <line x1="10" y1="90" x2="90" y2="10" stroke="black" stroke-width="2"/>
</svg>

<polyline>

用于绘制折线，有以下属性：

• points：由一组坐标构成的点集。

示例代码：

<svg width="100" height="100">
  <polyline points="10 10, 50 90, 90 10" fill="none" stroke="black" stroke-width="2"/>
</svg>

<polygon>

用于绘制多边形，与 <polyline> 类似，只是需要在最后加上一个闭合点。

示例代码：

<svg width="100" height="100">
  <polygon points="10 10, 50 90, 90 10" fill="none" stroke="black" stroke-width="2"/>
</svg>

以上仅是 SVG 标记元素的冰山一角，还有许多丰富的用法等待开发者探索。