前端必知必会的SVG详解（二）**

在学习 SVG 之前，我们必须了解它的坐标系统。SVG 中的坐标系统与 Canvas 类似，以页面的左上角为原点，以 px 为单位，x 轴的正方向向右，y 轴的正方向向下。

要绘制一个图形，需要使用 <path> 元素，<path> 元素可以通过 d 属性指定路径。d 属性的值是一系列命令，每个命令都由一个字母和一组参数组成。最常用的命令包括：

• M：移动到
• L：连线到
• H：水平线到
• V：垂直线到
• C：曲线到
• S：平滑曲线到
• Q：二次贝塞尔曲线到
• T：平滑二次贝塞尔曲线到
• Z：闭合路径

例如，以下代码绘制一个矩形：

<path d="M 10 10 H 90 V 90 H 10 Z" />

还可以使用 SVG 绘制圆形、椭圆形、多边形、文本、渐变、动画和滤镜。

圆形：

<circle cx="50" cy="50" r="40" />

椭圆形：

<ellipse cx="50" cy="50" rx="40" ry="20" />

多边形：

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

文本：

<text x="50" y="50">Hello, SVG!</text>

渐变：

<linearGradient id="myGradient" x1="0%" y1="0%" x2="100%" y2="100%">
  <stop offset="0%" stop-color="red" />
  <stop offset="100%" stop-color="blue" />
</linearGradient>

<rect x="10" y="10" width="100" height="100" fill="url(#myGradient)" />

动画：

<animate attributeName="opacity" begin="0s" dur="1s" from="0" to="1" />

滤镜：

<filter id="myFilter">
  <feGaussianBlur stdDeviation="5" />
</filter>

<image filter="url(#myFilter)" href="image.png" />

掌握 SVG 的坐标系统和各种图形元素，可以让我们轻松创建出美观且交互式的图形界面。随着前端技术的发展，SVG 的应用场景也将变得越来越广泛。