SVG MDN 学习指南

一、什么是 SVG ？

SVG，即可缩放矢量图形（Scalable Vector Graphics）。

它是一种基于 XML 的标记语言，可以创建复杂的矢量图形。

与位图不同，矢量图形可以无限缩放，而不会失去清晰度。这使得 SVG 成为一种非常方便的多媒体图形格式，特别适合在网页上使用。

下面是一个简单的 SVG 示例：

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

二、SVG 元素

SVG 通过在页面上嵌入元素来创建图形。以下是一些常用的 SVG 元素：

1. <rect> 元素

<rect> 元素创建一个矩形。可以设置它的位置、大小、颜色等属性。

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

2. <circle> 元素

<circle> 元素创建一个圆形。可以设置它的位置、半径、颜色等属性。

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

3. <line> 元素

<line> 元素创建一条直线。可以设置它的起点和终点的坐标、颜色等属性。

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

4. <text> 元素

<text> 元素在 SVG 中创建文本。

<svg width="100" height="100">
  <text x="50" y="50" font-size="20" fill="black">Hello SVG!</text>
</svg>

5. <path> 元素

<path> 元素在 SVG 中创建复杂的路径。

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

三、SVG 属性

SVG 元素可以设置许多属性，用于调整它们的外观、位置和交互。以下是一些常用的 SVG 属性：

1. width 和 height 属性

width 和 height 属性定义了 SVG 元素的宽度和高度。

<svg width="100" height="100">
  ...
</svg>

2. x 和 y 属性

x 和 y 属性定义 SVG 元素的左上角的坐标。

<svg>
  <rect x="10" y="10" ... />
  <circle cx="50" cy="50" ... />
  ...
</svg>

3. fill 和 stroke 属性

fill 和 stroke 属性分别用于设置 SVG 元素的填充颜色和描边颜色。

<rect fill="red" stroke="black" ... />
<circle fill="blue" stroke="black" ... />
<line stroke="black" ... />
<text fill="black" ... > ... </text>
<path stroke="black" fill="none" ... />

4. transform 属性

transform 属性用于旋转、缩放、平移和倾斜 SVG 元素。

<rect transform="rotate(45)" ... />
<circle transform="scale(2)" ... />
<line transform="translate(20,20)" ... />
<text transform="skewX(45)" ... >...</text>
<path transform="scale(3) rotate(30)" ... />

四、SVG 交互

SVG 可以响应用户交互，例如鼠标移动、点击等。下面是一些常用的 SVG 交互事件：

1. onclick 事件

onclick 事件在用户单击 SVG 元素时触发。下面的示例会在每次单击时改变矩形的颜色。

<svg>
  <rect id="myRect" fill="red" width="100" height="100"
    onclick="document.getElementById('myRect').setAttribute('fill', 'blue');" />
</svg>

2. onmouseover 和 onmouseout 事件

onmouseover 和 onmouseout 事件在用户将鼠标移到 SVG 元素上或移开时触发。下面的示例会在鼠标移到圆形上时改变它的颜色。

<svg>
  <circle id="myCircle" fill="green" cx="50" cy="50" r="40"
    onmouseover="document.getElementById('myCircle').setAttribute('fill', 'blue');"
    onmouseout="document.getElementById('myCircle').setAttribute('fill', 'green');" />
</svg>

五、SVG 在 HTML 中的使用

在 HTML 中，可以通过下面的方式嵌入 SVG 图像：

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

SVG 也可以通过<img>标签来嵌入：

<img src="myimage.svg" width="100" height="100" />

如果需要在 HTML 中直接嵌入 SVG 并与 HTML 元素进行交互，可以使用<object>或<iframe>元素：

<object type="image/svg+xml" data="myimage.svg" width="100" height="100"></object>

六、SVG MDN 参考文档

以上内容仅是 SVG 的基本语法和常用元素，更多内容和详细参数请参考 SVG MDN 文档。