SVG 实例大全

SVG（Scalable Vector Graphics）是一种用于描述二维矢量图形的XML标记语言，可以实现在网页上展示矢量图形，而不会失真。在Web前端开发中，SVG被广泛应用于图标、动画、地图等方面。本章节将为你展示一些常见的SVG实例，帮助你更好地了解SVG的强大功能。

1. 简单图形

1.1 矩形

<svg width="100" height="100">
  <rect x="10" y="10" width="80" height="80" fill="red" />
</svg>

1.2 圆形

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

2. 路径

2.1 直线

<svg width="100" height="100">
  <path d="M10 10 L90 90" stroke="black" />
</svg>

2.2 曲线

<svg width="100" height="100">
  <path d="M10 10 Q50 90 90 10" stroke="black" fill="none" />
</svg>

3. 文本

3.1 普通文本

<svg width="100" height="100">
  <text x="10" y="50" fill="black">Hello, SVG!</text>
</svg>

3.2 路径文本

<svg width="100" height="100">
  <path id="path1" d="M10 10 L90 90" fill="none" />
  <text>
    <textPath xlink:href="#path1" fill="black">Text on a path</textPath>
  </text>
</svg>

以上是一些常见的SVG实例，希望能够帮助你更好地了解SVG的应用。在实际开发中，你可以根据需要进行更复杂的SVG图形设计。