SVG（Scalable Vector Graphics，可缩放矢量图形）是一种使用XML语言来定义二维图形的开放标准。与传统的栅格图像（像素图）相比，SVG图形是基于数学方程的矢量图形，因此可以无损地缩放、旋转和变形而不失真，而且文件体积较小，适合在各种屏幕上展示。下面我们将介绍如何使用SVG实现矢量图形的绘制与动画效果。
绘制基本形状
在SVG中，可以使用<rect>、<circle>、<ellipse>、<line>、<path>等元素来绘制各种基本形状。
<svg width="400" height="400">
<rect x="50" y="50" width="200" height="100" fill="blue" stroke="black" stroke-width="2" />
<circle cx="200" cy="200" r="50" fill="red" stroke="black" stroke-width="2" />
<ellipse cx="300" cy="100" rx="50" ry="30" fill="yellow" stroke="black" stroke-width="2" />
<line x1="50" y1="200" x2="250" y2="200" stroke="green" stroke-width="2" />
<path d="M100 200 L200 100 L300 200 Z" fill="none" stroke="purple" stroke-width="2" />
</svg>
在上面的例子中，我们分别绘制了矩形、圆形、椭圆、直线和路径，并设置了不同的填充色、描边色和描边宽度。
添加动画效果
SVG不仅可以用来绘制静态图形，还可以通过动画效果增加交互性和视觉效果。
通过属性动画
SVG中的属性可以通过CSS样式或直接在元素上设置来控制，我们可以通过改变属性的值来实现动画效果。
<svg width="400" height="400">
<rect x="50" y="50" width="200" height="100" fill="blue">
<animate attributeName="x" from="50" to="250" dur="2s" repeatCount="indefinite" />
</rect>
</svg>
在上面的例子中，矩形的x属性被设置为一个动画，从初始值50变化到250，动画时长为2秒，重复播放。
通过路径动画
SVG中的路径元素<path>可以通过指定路径数据来绘制出任意形状，我们可以通过改变路径数据来实现路径动画效果。
<svg width="400" height="400">
<path d="M100 200 L200 100 L300 200 Z" fill="none" stroke="purple" stroke-width="2">
<animate attributeName="d" dur="3s" repeatCount="indefinite"
values="M100 200 L200 100 L300 200 Z;
M200 200 L200 100 L300 300 Z;
M200 200 L300 100 L400 200 Z"
keyTimes="0; 0.5; 1" />
</path>
</svg>
在上面的例子中，路径的d属性被设置为一个动画，通过values和keyTimes属性指定三个不同的路径数据和对应的时间点，从而实现路径的动态变化。
结语
SVG提供了丰富的矢量图形绘制和动画效果的功能，通过灵活运用SVG的各种元素和属性，我们可以创造出丰富多样的交互式图形。希望这篇博客对于使用SVG实现矢量图形的绘制与动画效果有所帮助。
本文来自极简博客，作者：墨色流年，转载请注明原文链接：使用SVG实现矢量图形的绘制与动画效果
