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

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

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

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

如果沒有任何引數，那麼viewbox就直接返回一個空的<svg>：

var box = draw.viewbox()

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

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

如果viewbox中的<svg>的大小和實際的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('viewport') 
draw.rect(100,100).animate().fill('#f03').move(100,100) 
]]> 
</script> 
</svg>