7.3 SVG 圖像 · JavaScript 標準參考教程

SVG是“可縮放矢量圖”（Scalable Vector Graphics）的縮寫，是一種描述向量圖形的XML格式的標記化語言。也就是說，SVG本質上是文本文件，格式采用XML，可以在瀏覽器中顯示出矢量圖像。由于結構是XML格式，使得它可以插入HTML文檔，成為DOM的一部分，然后用JavaScript和CSS進行操作。相比傳統的圖像文件格式（比如JPG和PNG），SVG圖像的優勢就是文件體積小，并且放大多少倍都不會失真，因此非常合適用于網頁。 SVG圖像可以用Adobe公司的Illustrator軟件、開源軟件Inkscape等生成。目前，所有主流瀏覽器都支持，對于低于IE 9的瀏覽器，可以使用第三方的[polyfills函數庫](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills#svg)。 [TOC] ## 插入SVG文件 SVG插入網頁的方法有多種，可以用在img、object、embed、iframe等標簽，以及CSS的background-image屬性。 ~~~ <img src="circle.svg"> <object id="object" data="circle.svg" type="image/svg+xml"></object> <embed id="embed" src="icon.svg" type="image/svg+xml"> <iframe id="iframe" src="icon.svg"></iframe> ~~~ 上面是四種在網頁中插入SVG圖像的方式。此外，SVG文件還可以插入其他DOM元素，比如div元素，請看下面的例子（使用了jQuery函數庫）。 ~~~ <div id="stage"></div> <script> $("#stage").load('icon.svg',function(response){ $(this).addClass("svgLoaded"); if(!response){ // 加載失敗的處理代碼 } }); </script> ~~~ ## svg格式 SVG文件采用XML格式，就是普通的文本文件。 ~~~ <svg width="300" height="180"> <circle cx="30" cy="50" r="25" /> <circle cx="90" cy="50" r="25" class="red" /> <circle cx="150" cy="50" r="25" class="fancy" /> </svg> ~~~ 上面的svg文件，定義了三個圓，它們的cx、cy、r屬性分別為x坐標、y坐標和半徑。利用class屬性，可以為這些圓指定樣式。 ~~~ .red { fill: red; /* not background-color! */ } .fancy { fill: none; stroke: black; /* similar to border-color */ stroke-width: 3pt; /* similar to border-width */ } ~~~ 上面代碼中，fill屬性表示填充色，stroke屬性表示描邊色，stroke-width屬性表示邊線寬度。除了circle標簽表示圓，SVG文件還可以使用表示其他形狀的標簽。 ~~~ <svg> <line x1="0" y1="0" x2="200" y2="0" style="stroke:rgb(0,0,0);stroke-width:1"/></line> <rect x="0" y="0" height="100" width="200" style="stroke: #70d5dd; fill: #dd524b" /> <ellipse cx="60" cy="60" ry="40" rx="20" stroke="black" stroke-width="5" fill="silver"/></ellipse> <polygon fill="green" stroke="orange" stroke-width="10" points="350, 75 379,161 469,161 397,215 423,301 350,250 277,301 303,215 231,161 321,161"/><polygon> <path id="path1" d="M160.143,196c0,0,62.777-28.033,90-17.143c71.428,28.572,73.952-25.987,84.286-21.428" style="fill:none;stroke:2;"></path> </svg> ~~~ 上面代碼中，line、rect、ellipse、polygon和path標簽，分別表示線條、矩形、橢圓、多邊形和路徑。 g標簽用于將多個形狀組成一組，表示group。 ~~~ <svg width="300" height="180"> <g transform="translate(5, 15)"> <text x="0" y="0">Howdy!</text> <path d="M0,50 L50,0 Q100,0 100,50" fill="none" stroke-width="3" stroke="black" /> </g> </svg> ~~~ ## SVG文件的JavaScript操作 ### 獲取SVG DOM 如果使用img標簽插入SVG文件，則無法獲取SVG DOM。使用object、iframe、embed標簽，可以獲取SVG DOM。 ~~~ var svgObject = document.getElementById("object").contentDocument; var svgIframe = document.getElementById("iframe").contentDocument; var svgEmbed = document.getElementById("embed").getSVGDocument(); ~~~ 由于svg文件就是一般的XML文件，因此可以用DOM方法，選取頁面元素。 ~~~ // 改變填充色 document.getElementById("theCircle").style.fill = "red"; // 改變元素屬性 document.getElementById("theCircle").setAttribute("class", "changedColors"); // 綁定事件回調函數 document.getElementById("theCircle").addEventListener("click", function() { console.log("clicked") }); ~~~ ### 讀取svg源碼由于svg文件就是一個XML代碼的文本文件，因此可以通過讀取XML代碼的方式，讀取svg源碼。假定網頁中有一個svg元素。 ~~~ <div id="svg-container"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" width="500" height="440">  </svg> </div> ~~~ 使用XMLSerializer實例的serializeToString方法，獲取svg元素的代碼。 ~~~ var svgString = new XMLSerializer().serializeToString(document.querySelector('svg')); ~~~ ### 將svg圖像轉為canvas圖像首先，需要新建一個img對象，將svg圖像指定到該img對象的src屬性。 ~~~ var img = new Image(); var svg = new Blob([svgString], {type: "image/svg+xml;charset=utf-8"}); var DOMURL = self.URL || self.webkitURL || self; var url = DOMURL.createObjectURL(svg); img.src = url; ~~~ 然后，當圖像加載完成后，再將它繪制到canvas元素。 ~~~ img.onload = function() { var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0); }; ~~~ ## 實例假定我們要將下面的表格畫成圖形。 | Date | Amount | | --- | --- | | 2014-01-01 | $10 | | 2014-02-01 | $20 | | 2014-03-01 | $40 | | 2014-04-01 | $80 | 上面的圖形，可以畫成一個坐標系，Date作為橫軸，Amount作為縱軸，四行數據畫成一個數據點。 ~~~ <svg width="350" height="160"> <g class="layer" transform="translate(60,10)"> <circle r="5" cx="0" cy="105" /> <circle r="5" cx="90" cy="90" /> <circle r="5" cx="180" cy="60" /> <circle r="5" cx="270" cy="0" /> <g class="y axis"> <line x1="0" y1="0" x2="0" y2="120" /> <text x="-40" y="105" dy="5">$10</text> <text x="-40" y="0" dy="5">$80</text> </g> <g class="x axis" transform="translate(0, 120)"> <line x1="0" y1="0" x2="270" y2="0" /> <text x="-30" y="20">January 2014</text> <text x="240" y="20">April</text> </g> </g> </svg> ~~~ ## 參考鏈接 * Jon McPartland,?[An introduction to SVG animation](http://bigbitecreative.com/introduction-svg-animation/) * Alexander Goedde,?[SVG - Super Vector Graphics](http://tavendo.com/blog/post/super-vector-graphics/) * Joseph Wegner,?[Learning SVG](http://flippinawesome.org/2014/02/03/learning-svg/) * biovisualize,?[Direct svg to canvas to png conversion](http://bl.ocks.org/biovisualize/8187844)