导入
SVG 简介
了解 SVG 以及其图形和非图形元素。
简介
在 D3.js 中，我们来介绍一个重要的概念：SVG。SVG 代表可缩放矢量图形（Scalable Vector Graphics），是一种基于 XML 的矢量图形格式。虽然 HTML 在构建网页时非常有用，但当我们需要在网页上绘制图形时，HTML 的功能十分有限。而 SVG 可以用来绘制清晰锐利的图形。与位图等其他图像工具相比，SVG 在放大或缩小过程中仍能保持清晰度，具有显著优势。
SVG 由 W3C SVG 工作组 于 1998 年开发。目前，所有主流浏览器——Opera、Google Chrome、Mozilla Firefox、Safari 和 Microsoft Edge——都支持 SVG 渲染。
SVG logo
在网页中引入 SVG
要在网页中使用 SVG，只需在 HTML 文件中加入 svg 标签即可。
1<body> 2 <svg>内容</svg> 3</body>
其中的内容主要包含图形元素的属性。
SVG 主要由 图形元素 和一些 非图形元素 组成。下面我们逐一进行介绍。
图形元素
SVG 包含五种主要的图形元素，如下所示：
- 使用
line标签可以在svg标签内绘制直线。 - 使用
rect标签可以在svg标签内绘制矩形。 - 使用
circle标签可以在svg标签内绘制圆形。 - 使用
path标签可以在svg标签内绘制路径。 - 使用
text标签可以在svg标签内添加文字。
以下是一个关于 path 的示意图，展示了 SVG 中“路径”的含义：
...
The path illustration
非图形元素
SVG 还包含一些 非图形元素，它们本身不用于绘图，而是用于管理和组织已有元素。其中一种是 group（分组），可以通过 g 标签添加到 svg 标签中。我们可以将任意图形元素放入 g 标签内，从而更方便地进行移动、组织和变换操作。