【图形基础篇】03 # 声明式图形系统：如何用SVG图形元素绘制可视化图表？

说明

【跟月影学可视化】学习笔记。

什么是SVG

SVG 的全称是 Scalable Vector Graphics，可缩放矢量图，它是浏览器支持的一种基于 XML 语法的图像格式。

SVG 可以作为 HTML 内嵌元素使用，也可以作为图像通过 img 元素加载，或者绘制到 Canvas 内。

利用 SVG 绘制几何图形

svg 元素是 SVG 的根元素，属性 xmlns 是 xml 的名字空间。

SVG 坐标系和 Canvas 坐标系完全一样，都是以图像左上角为原点，x 轴向右，y 轴向下的左手坐标系。可以通过给 svg 元素设置 viewBox 属性，来改变 SVG 的坐标系。

利用 SVG 绘制层次关系图

SVG 元素要使用 方法来创建。该方法用于创建一个具有指定的命名空间 URI 和限定名称的元素。

有效的命名空间 URI：

• HTML – 参阅 http://www.w3.org/1999/xhtml
• SVG – 参阅 http://www.w3.org/2000/svg
• XBL – 参阅 http://www.mozilla.org/xbl
• XUL – 参阅 http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul