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(图片元素)

这些元素自己很简单，光看文档就能够了解，可是其中我我的以为值得一提的有以下几点：

1. SVG的路径功能很强大，能够实现几乎任何图形。再加上svg无损缩放的特性，其余前端技术无出其右。
2. 控制SVG对象一般须要使用控制其特有属性，例如填充颜色是fill, 填充边框是stroke，变形是transform, 这些与html对象是不一样的。
3. SVG图形的滤镜效果和渐变效果，须要使用svg的滤镜标签或者渐变标签做为色彩填充的引用对象。（在raphael类库中对此有封装，可是d3没有。d3不太在意这些样式问题，d3的重点在于数据转换）
4. SVG的位移、旋转、缩放、变形功能均可以经过transform属性来实现。配合SVG的动画标签，不依赖JS、CSS便可创造出各类动画效果。
5. SVG中亦可包含超连接锚点标签<a>，文字标签<text>, 图片标签<image>等，故而能够纯用svg作一个网页，仍是包含动画效果的。
6. 实际应用中，复杂图形的代码是难读的。尤为是涉及多层群组、复杂路径、各类滤镜的状况下。所以作图形设计的时候几乎必须用到SVG编辑器，例如大型软件adobe illustrator， visio, CorelDRAW，在线工具svg-edit，开源软件Scribus、Karbon14、Inkscape以及Sodipodi等。
7. 实际上，SVG技术自己的动态部分（包括时序控制和动画）就是基于SMIL标准。SVG文件还可嵌入JavaScript（严格地说，应该是ECMAScript）脚原本控制SVG对象。因此可使用原生JS或者像d3.js这样封装过的js类库来控制SVG，效率很高。
8. 特别说明：对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来处理）：

 

1 2 3 4 5 6 7

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）