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）