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)

上面的一行程式碼和下面的一行程式碼是等價的，前兩個參數表示

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

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

var box = draw.viewbox()

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

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

如果viewbox中的

SVG 文件

<?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中文網其他相關文章！