数据可视化系列之 SVG 手册SVG 作为一种强大的矢量图形格式，在 Web 设计和开发中发挥着越来越重要的作用。从简单

SVG 简介

什么是 SVG？

SVG（Scalable Vector Graphics，可缩放矢量图形）是一种基于 XML 的矢量图形格式，用于在 Web 上创建交互式和动态的 2D 图形。

SVG 的特点

分辨率独立：SVG 图形在缩放时不会失真，适合任何分辨率的显示设备。
交互性：SVG 支持 JavaScript 交互，可以创建复杂的动画和效果。
集成性：SVG 可以直接嵌入 HTML 中，易于与 CSS 和 JavaScript 结合使用。
文件大小：与位图相比，SVG 通常具有更小的文件大小，便于网络传输。

SVG 基础

SVG 的基本概念

SVG 图形由一系列基本图形元素组成，如矩形、圆形、线条、多边形等。

SVG 的 XML 结构

SVG 文件是一个 XML 文档，具有以下基本结构：

<svg width="100" height="100" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <!-- SVG内容 -->
</svg>

创建简单 SVG

以下是一个简单的 SVG 矩形示例：

fill 属性定义了矩形的填充颜色。
stroke 属性定义了矩形的描边颜色。
stroke-width 属性定义了矩形的描边宽度。

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <rect width="100" height="100" style="fill:rgb(0,0,255);stroke-width:2;stroke:rgb(0,0,0)" />
</svg>

SVG 核心元素

矩形（`<rect>`）

矩形元素用于创建矩形框。

x 和 y 属性指定了矩形左上角的坐标，即矩形的起始点。
width 和 height 属性定义了矩形的宽度和高度。

<rect x="10" y="10" width="150" height="100" />

圆形（`<circle>`）

圆形元素用于创建圆形。

cx 和 cy 属性定义了圆心的坐标，即圆的中心点的位置。
r 属性定义了圆的半径，以确定圆的大小。

<circle cx="100" cy="100" r="80" />

椭圆（`<ellipse>`）

椭圆元素用于创建椭圆形。

cx 和 cy 属性定义了椭圆的中心点坐标，即椭圆的中心位置。
rx 属性定义了椭圆水平轴（x 轴）的半径。
ry 属性定义了椭圆垂直轴（y 轴）的半径。

<ellipse cx="100" cy="100" rx="80" ry="50" />

线条（`<line>`）

线条元素用于创建直线。

x1 和 y1 属性定义了直线的起点坐标。
x2 和 y2 属性定义了直线的终点坐标。

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

多边形（`<polygon>`）

多边形元素用于创建具有任意数量边的多边形。

points 属性定义了多边形各个顶点的坐标，多个顶点的坐标以空格或逗号分隔，并且每对坐标使用逗号分隔。

<polygon points="100,10 40,198 190,78 10,78 160,198" />

多线段（`<polyline>`）

SVG 中的元素用于绘制多段线，它是 SVG 中常用的基本形状之一。

points 属性定义了多段线各个顶点的坐标，多个顶点的坐标以空格或逗号分隔，并且每对坐标使用逗号分隔

 <polyline points="50,50 100,150 150,100 200,200" fill="none" stroke="black" stroke-width="2" />

SVG 路径

路径（`<path>`）

路径元素是 SVG 中最强大的元素之一，它允许通过一系列路径命令来绘制复杂的形状。

<path d="M10 10 H 90 V 90 H 10 L 10 10" />

常用的路径命令包括：

M（移动到）
L（直线到）
H（水平线到）
V（垂直线到）
C（三次贝塞尔曲线）
S（光滑曲线）
Q（二次贝塞尔曲线）
T（光滑二次贝塞尔曲线）
A（圆弧）
Z（闭合路径）

SVG 样式和交互

SVG 样式

SVG 支持 CSS 样式，可以直接在 SVG 元素中使用style属性定义样式。

<rect width="100" height="100" style="fill:blue; stroke:pink; stroke-width:5" />

CSS 动画

SVG 元素可以应用 CSS 动画，实现动态效果。

@keyframes anim {
  from {
    fill: red;
  }
  to {
    fill: yellow;
  }
}

rect {
  animation: anim 5s infinite;
}

JavaScript 交互

SVG 支持 JavaScript，可以添加交互性，如事件监听和动态修改 SVG 属性。

document.querySelector("rect").addEventListener("click", function () {
  this.style.fill = "green";
});

SVG 图形组合

组合（`<g>`）

使用<g>元素可以将多个 SVG 元素组合在一起，作为一个整体进行变换和操作。

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

变换

SVG 支持多种变换操作，如平移（translate）、旋转（rotate）、缩放（scale）等。

<rect x="10" y="10" width="100" height="100" transform="rotate(45, 60, 60)" />

SVG 文本和滤镜

SVG 文本（`<text>`）

SVG 允许在图形中添加文本，并支持丰富的文本样式。

<text x="10" y="100" font-family="Verdana" font-size="20" fill="green">
  Hello, SVG!
</text>

SVG 滤镜（`<filter>`）

SVG 滤镜可以为图形添加各种视觉效果，如阴影、模糊、颜色变换等。

<filter id="f1" x="0" y="0" width="200%" height="200%">
  <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
</filter>

<rect x="10" y="10" width="100" height="100" filter="url(#f1)" />

SVG 与 Canvas 的区别

特性/方面	SVG（可缩放矢量图形）	Canvas（画布）
基于	矢量图形	位图图形
缩放	无限缩放，不失真	有限缩放，可能失真
文件大小	通常较大	通常较小
交互性	支持	不原生支持，需通过脚本实现
动画	支持	支持，但需要 JavaScript 控制
渲染性能	适合复杂图形和图标	适合游戏和实时图形
浏览器兼容性	良好	良好
适用场景	标志、图标、简单图形	游戏、复杂动画、实时渲染
文件格式	.svg	无特定文件格式，通常以 DataURL 或图片格式保存
可访问性	文本内容，易于搜索引擎优化	图像内容，不利于搜索引擎优化
脚本语言	XML 和 CSS	JavaScript
硬件加速	是	否
跨平台	是	是

结语

SVG 作为一种强大的矢量图形格式，在 Web 设计和开发中发挥着越来越重要的作用。从简单的图形绘制到复杂的交互设计，SVG 都能够胜任。掌握 SVG，将为你的 Web 项目带来无限可能。

数据可视化系列之 SVG 手册