SVG 在 HTML 中学习笔记

什么是 SVG？

SVG 是可缩放矢量图形（Scalable Vector Graphics）的缩写，它是一种基于 XML 的标记语言，用于描述二维图形和动画。

相比于传统的位图，SVG 图像可以无限放大而不失真，并且具有可编辑性，因此被广泛应用于图表、图标、地图等领域。

在 HTML 中使用 SVG

在 HTML 中使用 SVG 有两种方式：嵌入式（inline）和作为外部文件（external）引入。

嵌入式 SVG

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

上面的代码创建了一个 100x100 的 SVG 元素，并在其中绘制了一个红色的矩形。其中，width 和 height 属性指定了 SVG 元素的宽高，矩形的尺寸和位置则通过 x、y、width 和 height 属性来设置。

除了矩形，SVG 还支持多种形状和图形元素，例如圆形、椭圆、线段、多边形等。

外部文件引用 SVG

把 SVG 代码保存为独立的 .svg 文件，然后通过 <img> 标签进行引用：

htmlCopy Code
<img src="path/to/your/image.svg" alt="svg image">

或者使用 <object> 标签：

htmlCopy Code
<object data="path/to/your/image.svg" type="image/svg+xml"></object>

SVG 的优势

1. 矢量图形，无限缩放而不失真。
2. 可以使用 CSS 进行样式控制。
3. 可以通过 JavaScript 实现交互效果和动画。
4. 文件大小小，加载速度快。

实例

下面是一个使用 SVG 和 JavaScript 实现的简单动画效果：

htmlCopy Code
<svg width="200" height="200">
  <rect x="0" y="80" width="20" height="40" fill="#F44336">
    <animate attributeName="x" from="0" to="180" dur="2s" repeatCount="indefinite" />
  </rect>
</svg>

这段代码创建了一个 200x200 的 SVG 元素，并在其中绘制了一个红色的矩形。接着，通过 <animate> 元素，设定了矩形向右移动的动画效果，从 0 移动到 180，持续时间为 2 秒，循环播放。

当你在浏览器中打开这个文件时，你会看到一个不停移动的矩形。