SVG（Scalable Vector Graphics）是一种基于 XML 的矢量图形格式，广泛用于网页和应用程序中。以下是 SVG 标签的详细使用教程，涵盖基本形状、路径、文本、渐变、动画等内容。

---

1. SVG 基础结构

SVG 图形需要放在 <svg> 标签中，并指定宽度和高度。

html"><svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><!-- SVG 内容 -->
</svg>

• width 和 height：定义 SVG 画布的大小。
• xmlns：指定 SVG 的命名空间。

---

2. 基本形状

SVG 支持多种基本形状，如矩形、圆形、椭圆、线条和多边形。

矩形 (<rect>)

html"><rect x="10" y="10" width="100" height="50" fill="blue" stroke="black" stroke-width="2" />

• x 和 y：矩形左上角的坐标。
• width 和 height：矩形的宽度和高度。
• fill：填充颜色。
• stroke：边框颜色。
• stroke-width：边框宽度。

圆形 (<circle>)

html"><circle cx="50" cy="50" r="40" fill="red" stroke="black" stroke-width="2" />

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

椭圆 (<ellipse>)

html"><ellipse cx="100" cy="50" rx="80" ry="30" fill="green" />

• cx 和 cy：椭圆中心的坐标。
• rx 和 ry：椭圆的水平半径和垂直半径。

线条 (<line>)

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

• x1 和 y1：起点坐标。
• x2 和 y2：终点坐标。

多边形 (<polygon>)

html"><polygon points="50,5 100,50 50,95 5,50" fill="yellow" stroke="black" stroke-width="2" />

• points：多边形的顶点坐标，格式为 x1,y1 x2,y2 x3,y3 ...。

---

3. 路径 (<path>)

<path> 是 SVG 中最强大的元素，可以绘制任意形状。

html"><path d="M10 10 L100 100 Q150 50 200 100 Z" fill="none" stroke="black" stroke-width="2" />

• d：定义路径的命令。
  • M：移动到某个点。
  • L：画一条直线。
  • Q：画二次贝塞尔曲线。
  • Z：闭合路径。

---

4. 文本 (<text>)

SVG 支持在图形中添加文本。

html"><text x="10" y="50" font-family="Arial" font-size="20" fill="black">Hello SVG!</text>

• x 和 y：文本的起始坐标。
• font-family：字体。
• font-size：字体大小。
• fill：文本颜色。

---

5. 渐变

SVG 支持线性渐变和径向渐变。

线性渐变 (<linearGradient>)

html"><defs><linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" style="stop-color:red;stop-opacity:1" /><stop offset="100%" style="stop-color:yellow;stop-opacity:1" /></linearGradient>
</defs>
<rect x="10" y="10" width="100" height="50" fill="url(#grad1)" />

• x1, y1, x2, y2：定义渐变的方向。
• stop：定义渐变的颜色和位置。

径向渐变 (<radialGradient>)

html"><defs><radialGradient id="grad2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"><stop offset="0%" style="stop-color:blue;stop-opacity:1" /><stop offset="100%" style="stop-color:white;stop-opacity:1" /></radialGradient>
</defs>
<circle cx="100" cy="100" r="50" fill="url(#grad2)" />

---

6. 动画 (<animate>)

SVG 支持通过 <animate> 标签实现动画效果。

html"><circle cx="50" cy="50" r="20" fill="red"><animate attributeName="cx" from="50" to="200" dur="2s" repeatCount="indefinite" />
</circle>

• attributeName：需要动画的属性。
• from 和 to：属性的起始值和结束值。
• dur：动画持续时间。
• repeatCount：动画重复次数。

---

7. 分组 (<g>)

<g> 标签用于将多个元素分组，方便统一操作。

html"><g transform="translate(50,50)"><rect x="0" y="0" width="50" height="50" fill="blue" /><circle cx="25" cy="25" r="10" fill="red" />
</g>

• transform：对组内的所有元素应用变换（如平移、旋转、缩放等）。

---

8. 嵌入外部 SVG

可以通过 <use> 标签复用已有的 SVG 元素。

html"><defs><circle id="myCircle" cx="50" cy="50" r="40" fill="green" />
</defs>
<use xlink:href="#myCircle" x="100" y="0" />

---

9. SVG 与 CSS

SVG 可以与 CSS 结合使用，实现更复杂的样式和动画。

html"><style>.myRect {fill: orange;stroke: black;stroke-width: 2;}.myRect:hover {fill: red;}
</style>
<rect class="myRect" x="10" y="10" width="100" height="50" />

---

10. SVG 与 JavaScript

SVG 可以通过 JavaScript 动态操作。

html"><svg width="200" height="200"><circle id="myCircle" cx="50" cy="50" r="40" fill="blue" />
</svg>
<script>document.getElementById('myCircle').addEventListener('click', function() {this.setAttribute('fill', 'red');});
</script>

---

总结

SVG 是一种强大的矢量图形格式，适用于图标、图表、动画等场景。通过掌握基本形状、路径、渐变、动画等特性，可以创建出丰富的图形效果。结合 CSS 和 JavaScript，SVG 的功能更加强大。