d3可视化实战01：理解SVG元素特性

一. SVG简介

—————————————————————————————————————————————————————————————————

SVG是一种和图像分辨率无关的矢量图形格式，它使用严格的XML语法描述图形内容。关于它，主机位于麻省理工学院的W3c官网有着全面的介绍（http://www.w3.org/Graphics/SVG/）。

上面这张图片展示了位图和矢量图的区别。位图是由点构成的，矢量图则是由一些形状元素构成。该图中显示放大位图可以看到点，而放大矢量图看到的仍然是形状。SVG属于矢量图，因此能够无级缩放，而不会导致马赛克。

我个人认为想要了解一门语言，不论它是计算机语言还是自然语言，它的产生发展的历史都是非常好的切入点。

SVG最早于1999年由一系列加入W3C的公司提出，并且SVG很早就因为它的易读、可编辑、易于进行脚本控制和易于制作网页上的交互图形等优点而为人们所瞩目，但在2011年才最终被收录为W3C标准。IE系列长期不能支持SVG，直到IE9。造成这种结果是有着深刻的历史原因。

SVG格式绝非第一种矢量图形格式。在它被提出的前一年，还有adobe联合IBM、netscape、SUN提出的PGML格式（Precision Graphics Markup Language）和微软提出的VML格式（Vector Markup Language）被提交给了W3C。正在二者因为激烈的商业竞争相持不下的时候，W3C启动了一个SVG工作小组，花了6个月时间在PGML和VML的基础之上开发出了SVG标准，希望弥合两大阵营的分歧——但结果是SVG成了第三个竞争者。不过由于SVG的种种优势和与PGML的许多相似性，PGML阵营的公司很多都加入了SVG阵营。但是微软依旧我行我素。因为当时微软已经是独霸天下，在浏览器之争中靠着捆绑策略把netscape打得爬不起来。虽然微软提出的VML被W3C拒绝，但它依旧只挺自家的娃，因而在之后微软推出的IE5.0+和microsoft office 2000+只能用VML，直到2008年VML实在是没人用而被微软放弃为止。除此以外，adobe公司的flash也一直霸占着矢量图形程序的很大一块市场份额，与通用的矢量图形格式SVG互相竞争。以上问题导致直到诞生12年后的2011年，SVG才被列为W3C标准。我只能说，有人的地方，就有江湖，技术标准的制定离不开江湖规则的干涉。好在现在市场份额第一的浏览器已经是谷歌的chrome，而不是IE了。特别值得一提的是，在移动端领域，由于微软的边缘化，所以SVG的支持率非常高。尽情地用SVG制作交互图形吧！

二.SVG的基本元素

—————————————————————————————————————————————————————————————————

SVG标签有很多，详见：w3cSchool。为了简单起见，可以把其元素分为三大类：矢量图形、文字、引用位图。其中常用的如下：

矢量图形：svg(定义svg文档片段), rect(定义矩形), circle(定义圆形)，ellipse(定义椭圆)，path(路径)，line(线)，ploygon(多边形)，title(标题), desc(描述)， g(群组)， defs(参考元素)。
文字：text(文字)，锚点（a）
引用位图： image(图片元素)

这些元素本身很简单，光看文档就可以了解，但是其中我个人觉得值得一提的有如下几点：

SVG的路径功能很强大，可以实现几乎任何图形。再加上svg无损缩放的特性，其他前端技术无出其右。
控制SVG对象通常需要使用控制其特有属性，例如填充颜色是fill, 填充边框是stroke，变形是transform, 这些与html对象是不同的。
SVG图形的滤镜效果和渐变效果，需要使用svg的滤镜标签或者渐变标签作为色彩填充的引用对象。（在raphael类库中对此有封装，但是d3没有。d3不太在乎这些样式问题，d3的重点在于数据转换）
SVG的位移、旋转、缩放、变形功能都可以通过transform属性来实现。配合SVG的动画标签，不依赖JS、CSS即可创造出各种动画效果。
SVG中亦可包含超链接锚点标签<a>，文字标签<text>, 图片标签<image>等，故而可以纯用svg做一个网页，还是包含动画效果的。
实际应用中，复杂图形的代码是难读的。尤其是涉及多层群组、复杂路径、各种滤镜的情况下。因此做图形设计的时候几乎必须用到SVG编辑器，例如大型软件adobe illustrator， visio, CorelDRAW，在线工具svg-edit，开源软件Scribus、Karbon14、Inkscape以及Sodipodi等。
实际上，SVG技术本身的动态部分（包括时序控制和动画）就是基于SMIL标准。SVG文件还可嵌入JavaScript（严格地说，应该是ECMAScript）脚本来控制SVG对象。所以可以使用原生JS或者像d3.js这样封装过的js类库来控制SVG，效率很高。
特别说明：对SVG的dom元素使用jquery进行直接的增删改操作是不行的，毕竟jquery的设计初衷就不像d3那样为了操作SVG而生。如果一定要用jquery，下载这个jquery SVG控制插件即可。

三.SVG与html的共同使用

—————————————————————————————————————————————————————————————————

在现代浏览器中，SVG与html是并行不悖的。通常我们是在一个html页面中，嵌入一组svg元素来表现矢量内容。但是，考虑到有些交互操作的复杂性，我们有可能需要在SVG元素中再显示一些div之类的html标签。但是遗憾的是，直接这样做的结果是这些嵌入的html标签不会显示。这是使用SVG制作交互图表时经常遇到的问题。有两个解决办法：

1.将div使用SVG元素foreignObject包裹。详见：http://ajaxian.com/archives/foreignobject-hey-youve-got-html-in-my-svg。但是IE的任何版本都不支持foreignObject！包括新出的IE11！微软你还要祸害到什么时候！

2.将div定义为浮动层，然后使用left, top等属性计算位置，浮动显示在SVG图形之上。这是较为常用的方法，因为d3也可以同时控制html元素，而动画效果可以通过css3来解决，不会有什么兼容性问题。详见我之前的文章：SVG文字交互区域的制作注意：html object in SVG

四.CSS与SVG

—————————————————————————————————————————————————————————————————

这里我有必要对兼容性还有疑虑的童鞋说一句，既然已经喝了毒药，那么就把盘子舔干净吧！既然已经用了SVG，那么就可以放心地用CSS3了。因为但凡支持SVG都是现代浏览器，现代浏览器又基本支持CSS3，所以为什么不用呢？让那些CSS3动画效果，阴影效果，圆角什么的来得更猛烈些吧！

必须指出的是，CSS3的标准指定，大幅度地参考了SVG。尤其是CSS3的变形和动画效果，咱们可以对比一下CSS3的写法和SVG的写法，简直是一模一样啊！所以在使用SVG制作图表时，可以大胆地使用css3动画效果去处理html元素。当然，由于一些css3效果在不同浏览器里支持情况不同，所以对于一些支持情况不太好的效果，比如变形，还是得同一个属性一口气写5个带前缀的语句，来保证兼容性，就像下面这样（这个程序里我们用d3来进行div的放大缩小，实际上用的是操纵CSS3来处理）：

d3.select("div").style({

"transform": "scale(" + config.scale + ")",

"-webkit-transform": "scale(" + config.scale + ")",

"-moz-transform": "scale(" + config.scale + ")",

"-o-transform": "scale(" + config.scale + ")",

"-ms-transform": "scale(" + config.scale + ")"

})

还有一点要指出的是，SVG元素当然也可以用css来指定样式。例如做SVG元素节点的点击效果，你也可以写d3.select(“.path”).class(“active”, true),给path赋予一个名为active的css类，然后把样式写css里。当然，css里得写SVG的那些属性，例如填充是fill,边框是stroke。

使用svg编辑软件画的妹子，还等什么快来使用svg吧！（摘自wikipedia）