2026-03-13

SVG

api

SVG（Scalable Vector Graphics）是一种基于 XML 的标记语言，用于描述二维矢量图形。SVG 图形可以通过 HTML 直接嵌入网页中，也可以通过 JavaScript 动态生成和操作。SVG 提供了丰富的图形绘制功能，包括形状、路径、文本、图像等，并且支持动画和交互。
以下是 SVG 的一些常用 API 和功能，以及示例代码。

1. 基本形状

SVG 提供了多种基本形状的元素，如矩形、圆形、椭圆、线条、多边形等。

矩形（`<rect>`）

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

圆形（`<circle>`）

1	<circle cx="150" cy="150" r="50" fill="blue" />

椭圆（`<ellipse>`）

1	<ellipse cx="250" cy="150" rx="50" ry="30" fill="green" />

线条（`<line>`）

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

多边形（`<polygon>`）

1	<polygon points="100,10 40,180 190,60 10,60 160,180" fill="orange" />

多段线（`<polyline>`）

1	<polyline points="50,10 100,50 150,10" stroke="purple" stroke-width="3" fill="none" />

2. 路径（`<path>`）

路径是 SVG 中最强大的图形元素，可以通过一系列指令绘制复杂的形状。

1	<path d="M10 10 L100 10 L100 100 L10 100 Z" fill="yellow" />

M：移动到指定点（Move to）
L：绘制直线（Line to）
Z：闭合路径（Close path）

3. 文本（`<text>`）

用于在 SVG 中添加文本内容。

1	<text x="50" y="50" font-family="Arial" font-size="20" fill="black">Hello SVG!</text>

4. 图像（`<image>`）

可以将外部图像嵌入 SVG 中。

1	<image href="path/to/image.jpg" x="10" y="10" width="200" height="200" />

5. 样式和属性

SVG 元素可以通过内联样式或 CSS 类来设置样式。

内联样式

1	<rect x="10" y="10" width="100" height="100" style="fill: red; stroke: black; stroke-width: 2;" />

CSS 类

<style>
    .my-rect {
        fill: blue;
        stroke: green;
        stroke-width: 3;
    }
</style>
<rect x="10" y="10" width="100" height="100" class="my-rect" />

6. 变换（`<g>` 和 `transform`）

可以使用 <g> 元素对多个图形进行分组，并应用变换。

<g transform="translate(50, 50)">
    <rect x="10" y="10" width="100" height="100" fill="red" />
    <circle cx="150" cy="150" r="50" fill="blue" />
</g>

常见的变换类型：

translate(x, y)：平移
rotate(angle, cx, cy)：旋转
scale(sx, sy)：缩放
skewX(angle)：水平倾斜
skewY(angle)：垂直倾斜

7. 动画（`<animate>` 和 `<animateTransform>`）

SVG 提供了内置的动画支持。

简单动画

1
2
3

<rect x="10" y="10" width="100" height="100" fill="red">
    <animate attributeName="x" from="10" to="200" dur="2s" repeatCount="indefinite" />
</rect>

路径动画

<circle cx="50" cy="50" r="20" fill="blue">
    <animateMotion dur="5s" repeatCount="indefinite">
        <mpath href="#myPath" />
    </animateMotion>
</circle>
<path id="myPath" d="M10,10 C100,100 200,100 200,10" stroke="black" fill="none" />

8. 事件处理

SVG 元素支持常见的 DOM 事件，如 click、mouseover 等。

1	<rect x="10" y="10" width="100" height="100" fill="red" onclick="alert('Clicked!')" />

9. 创建 SVG 画布

SVG 可以通过 HTML 嵌入，也可以通过 JavaScript 动态创建。

HTML 嵌入

1
2
3

<svg width="500" height="500" xmlns="http://www.w3.org/2000/svg">
    <rect x="10" y="10" width="100" height="100" fill="red" />
</svg>

JavaScript 动态创建

const svgNS = "http://www.w3.org/2000/svg";
const svg = document.createElementNS(svgNS, "svg");
svg.setAttribute("width", "500");
svg.setAttribute("height", "500");
const rect = document.createElementNS(svgNS, "rect");
rect.setAttribute("x", "10");
rect.setAttribute("y", "10");
rect.setAttribute("width", "100");
rect.setAttribute("height", "100");
rect.setAttribute("fill", "red");
svg.appendChild(rect);
document.body.appendChild(svg);

10. 嵌入 SVG 文件

SVG 文件可以通过 <img> 或 <object> 标签嵌入网页中。

1	<img src="path/to/image.svg" alt="SVG Image" />

或者：

1	<object type="image/svg+xml" data="path/to/image.svg"></object>

11. SVG 与 JavaScript 交互

可以通过 JavaScript 操作 SVG 元素。

修改属性

1 2	const rect = document.querySelector("rect"); rect.setAttribute("fill", "blue");

添加事件监听器

const rect = document.querySelector("rect");
rect.addEventListener("click", function() {
    alert("Rectangle clicked!");
});

12. 响应式 SVG

SVG 可以通过设置 viewBox 属性实现响应式设计。

1
2
3

<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
    <rect x="10" y="10" width="100" height="100" fill="red" />
</svg>

viewBox 定义了 SVG 的内部坐标系统，SVG 会根据容器的大小自动缩放内容。

13. 复杂图形

SVG 可以通过组合多个图形元素来创建复杂的图形。

示例：绘制国旗

<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="0" width="300" height="200" fill="white" />
    <rect x="0" y="0" width="300" height="66.67" fill="red" />
    <rect x="0" y="66.67" width="300" height="66.67" fill="white" />
    <rect x="0" y="133.34" width="300" height="66.67" fill="red" />
</svg>

14. SVG 的优势

矢量图形：无损缩放，适合高分辨率显示。
可交互：支持事件监听和动态操作。
**可嵌

SVG

api