SVG

本书不会深入研究 SVG 的细节，但是我会简单地解释其工作原理。在本章的结尾，我会再次来讨论，对于某个具体的应用来说，我们应该如何权衡利弊选择一种绘图方式。

这是一个带有简单的 SVG 图片的 HTML 文档。

  1. <p>Normal HTML here.</p>
  2. <svg xmlns="http://www.w3.org/2000/svg">
  3.   <circle r="50" cx="50" cy="50" fill="red"/>
  4.   <rect x="120" y="5" width="90" height="90"
  5.         stroke="blue" fill="none"/>
  6. </svg>

xmlns属性把一个元素（以及他的子元素）切换到一个不同的 XML 命名空间。这个由url定义的命名空间，规定了我们当前使用的语言。在 HTML 中不存在<circle>与<rect>标签，但这些标签在 SVG 中是有意义的，你可以通过这些标签的属性来绘制图像并指定样式与位置。

和 HTML 标签一样，这些标签会创建 DOM 元素，脚本可以和它们交互。例如，下面的代码可以把<circle>元素的颜色替换为青色。

  1. let circle = document.querySelector("circle");
  2. circle.setAttribute("fill", "cyan");