SVG 实例

什么是 SVG?

SVG 即 Scalable Vector Graphics，是一种基于 XML 的图像格式，它具有可伸缩性、交互性和丰富的动态效果。它的优点包括：

• 矢量图形：SVG 的图像是矢量形式的，因此可以随意缩放而不会失去清晰度。
• 可交互性：SVG 的元素可以用 JavaScript 进行控制和交互，使得用户界面更加灵活。
• 动态效果：SVG 可以部署动态效果，比如过渡、动画，让视觉效果更加生动。
• 跨平台：SVG 可以在各种浏览器和操作系统上展示，无需转换或修改。

SVG 基本用法

使用 SVG 最简单的方法就是在 HTML 文件中直接嵌入 SVG 标签，然后在标签内写入 SVG 图形的定义。例如，下列代码是一个简单的 SVG 矩形定义：

<svg width="400" height="400">
  <rect x="50" y="50" width="300" height="300" fill="cornflowerblue"/>
</svg>

在上面的代码中，设置 SVG 宽度和高度的属性是一个必需的步骤。rect 元素代表矩形，x 和 y 属性指定左上角的位置，width 和 height 属性指定矩形的尺寸，fill 属性则用于设置矩形的填充颜色。

SVG 实例

SVG 除这些基本元素外，还有很多其他有用的元素和属性，例如：

1. 圆形元素

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

上面的代码中，圆圈的中心坐标是(cx, cy)，r 属性指定圆的半径大小， stroke 和 stroke-width 属性用于设置圆形的边框颜色和边框宽度，fill 属性是填充颜色。

2. 直线元素

<svg>
  <line x1="10" y1="10" x2="90" y2="90" stroke="black" stroke-width="1"/>
</svg>

与 SVG 梯形元素类似，line 元素用于绘制一条直线，x1 和 y1 属性储存起点位置，x2 和 y2 属性储存终点位置，stroke 和 stroke-width 属性分别用于设置直线的颜色和宽度。

3. 多边形元素

<svg>
  <polygon points="20,20 40,20 50,40 40,60 20,60 10,40" stroke="black" stroke-width="1" fill="lightgray"/>
</svg>

上面代码中， polygon 元素用于绘制多边形， points 属性指定多边形的各个点坐标，stroke 和 stroke-width 属性用于多边形的边框，fill 属性用于填充多边形的颜色。

4. 路径元素

<svg>
  <path d="M10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="none"/>
</svg>

path 元素用于绘制路径，d 属性包含了路径的命令，如果你不了解 SVG 路径命令，请查看path 介绍。stroke 和 fill 属性用于绘制路径的颜色。

SVG 动画

SVG 有两种实现动画的方式，一种是基于 CSS 的动画，另一种是基于 JavaScript 的动画。这里展示如何使用 CSS 实现动画。

<svg width="300" height="200">
  <circle cx="30" cy="100" r="20" stroke="white" stroke-width="2" fill="skyblue">
    <animate attributeName="cx" from="30" to="270" dur="5s" repeatCount="indefinite"/>
  </circle>
</svg>

上述代码中，animate 元素定义了动画动态属性的名称(attributeName)、起始值(from)、目标值(to)，以及动画的持续时间(dur)和重复次数(repeatCount)。在这个例子中，圆的 x 轴坐标(cx) 从 30 变到 270，而且它将无限重复。

除了动态属性，SVG 中还有其他动画元素，例如 animateTransform、animateMotion 和 animateColor，分别可以用于变换、运动和颜色动画。

结论

总之，SVG 是一种强大、灵活且可扩展的图形格式，可以满足众多场景下的需求，并且容易使用。我们可以使用基本元素，如矩形、曲线和多边形，或者利用动画元素和 JavaScript 控制 SVG 图形的交互。因此，将 SVG 引入您的项目，可能是您需要添加更丰富的视觉效果的答案。