javascript中svg是做什麼的

在JavaScript中，svg是指可伸縮向量圖形，是基於XML用來描述二維向量圖形的一種圖形格式，而「svg.js」是一個輕量級的JavaScript函式庫，可以操作svg和定義動畫。

本教學操作環境：windows10系統、javascript1.8.5版、Dell G3電腦。

javascript中svg是做什麼的

#什麼是SVG？

SVG 指可伸縮向量圖形(Scalable Vector Graphics)

SVG 用來定義用於網路的基於向量的圖形

SVG 使用XML 格式定義圖形

SVG 影像在放大或改變尺寸的情況下其圖形品質不會有所損失

SVG 是萬維網聯盟的標準

SVG 與諸如DOM 和XSL 之類的W3C 標準是一個整體

簡介：

SVG.js是一個輕量級的JavaScript函式庫，讓你可以輕鬆操作SVG和定義動畫。

SVG（Scalable Vector Graphics，可縮放向量圖形）是基於XML、用於描述二維向量圖形的圖形格式。 SVG由W3C制定，是一個開放標準。 

SVG.js包含了大量用於定義動畫的方法，例如移動、縮放、旋轉、傾斜等，請參考相關示範。

•易讀的簡潔的語法

•非常輕量，gzip壓縮版只有5k

•針對大小、位置、顏色等的動畫元素

•模組化結構，輕鬆擴展

•各種實用外掛

•各種形狀類型間擁有統一的API.

•元素可以綁定事件，包括觸控事件

•完全支援不透明遮罩

•元素組

#•動態漸層

•填滿模式

•完整的文檔記錄

建立一個SVG文檔

使用SVG()函數來在一個給定的html元素中建立一個SVG文檔：

var draw = SVG('canvas').size(300, 300)
var rect = draw.rect(100, 100).attr({ fill: '#f06' })

其中SVG()中的參數可以使一個元素的id或元素本身。

以上兩句將在html文件中產生以下程式碼：

<div id="canvas">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300">
<rect width="100" height="100" fill="#f06"></rect>
</svg>
</div>

當然，要定義SVG畫布的大小，除了使用像素之外，也可以使用百分比的。如下：

var draw = SVG('canvas').size('100%', '100%')

偵測瀏覽器對SVG的支援度

在使用svg.js之前，可以先用以下的程式碼來偵測瀏覽器對svg.js這個函式庫的支援情況：

if (SVG.supported) { 
var draw = SVG('canvas') 
var rect = draw.rect(100,100) } 
else { 
alert('SVG not supported') }

ViewBox

486d7a50595533609bc98d44595dc670的屬性可以用viewbox()方法來決定，viewbox()方法就像是一個setter函數一樣，如下所示：

draw.viewbox(0,0,297,210)

上面的一行程式碼和下面的一行程式碼是等價的，前兩個參數表示486d7a50595533609bc98d44595dc670的位置，後兩個是其寬度和高度。

draw.viewbox({ x: 0, y: 0, width: 297, height: 210 })

如果沒有任何參數，那麼viewbox就直接回傳一個空的486d7a50595533609bc98d44595dc670：

var box = draw.viewbox()

viewbox() 方法可以有zoom屬性，

var box = draw.viewbox() var zoom = box.zoom

如果viewbox中的486d7a50595533609bc98d44595dc670的大小和實際的SVG畫布的大小相同，那麼zoom的值就是1.

SVG 文件

##svg.js也可以在htmlDOM外部工作，如下所示，是一個獨立的svg文件，就像是外部的js文件一樣。

<?xml version="1.0" encoding="utf-8" ?> 
<svg id="viewport"xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"version="1.1"> 
<script type="text/javascript"xlink:href="svg.min.js">
</script> 
<scripttype="text/javascript"> 
<![CDATA[ 
var draw = SVG(&#39;viewport&#39;) 
draw.rect(100,100).animate().fill(&#39;#f03&#39;).move(100,100) 
]]> 
</script> 
</svg>

相關推薦：

javascript學習教學

以上是javascript中svg是做什麼的的詳細內容。更多資訊請關注PHP中文網其他相關文章！