SVG（Scalable Vector Graphics）是一种基于 XML 的矢量图形格式，广泛用于网页和应用程序中。以下是 SVG 标签的详细使用教程，涵盖基本形状、路径、文本、渐变、动画等内容。
1. SVG 基础结构
SVG 图形需要放在 <svg> 标签中，并指定宽度和高度。
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<!-- SVG 内容 -->
</svg>
width和height：定义 SVG 画布的大小。xmlns：指定 SVG 的命名空间。
2. 基本形状
SVG 支持多种基本形状，如矩形、圆形、椭圆、线条和多边形。
矩形 (<rect>)
<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>)
<circle cx="50" cy="50" r="40" fill="red" stroke="black" stroke-width="2" />
cx和cy：圆心的坐标。r：半径。
椭圆 (<ellipse>)
<ellipse cx="100" cy="50" rx="80" ry="30" fill="green" />
cx和cy：椭圆中心的坐标。rx和ry：椭圆的水平半径和垂直半径。
线条 (<line>)
<line x1="10" y1="10" x2="100" y2="100" stroke="black" stroke-width="2" />
x1和y1：起点坐标。x2和y2：终点坐标。
多边形 (<polygon>)
<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 中最强大的元素，可以绘制任意形状。
<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 支持在图形中添加文本。
<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>)
<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>)
<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> 标签实现动画效果。
<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> 标签用于将多个元素分组，方便统一操作。
<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 元素。
<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 结合使用，实现更复杂的样式和动画。
<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 动态操作。
<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 的功能更加强大。
