javascript中svg有什么用

這篇文章給大家分享的是有關(guān)javascript中svg有什么用的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

在JavaScript中，svg是指可伸縮矢量圖形，是基于XML用于描述二維矢量圖形的一種圖形格式，“svg.js”是一個(gè)輕量級的JavaScript庫，可以操作svg和定義動(dòng)畫。

本教程操作環(huán)境：windows10系統(tǒng)、javascript1.8.5版、Dell G3電腦。

什么是SVG？

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

SVG 用來定義用于網(wǎng)絡(luò)的基于矢量的圖形

SVG 使用 XML 格式定義圖形

SVG 圖像在放大或改變尺寸的情況下其圖形質(zhì)量不會(huì)有所損失

SVG 是萬維網(wǎng)聯(lián)盟的標(biāo)準(zhǔn)

SVG 與諸如 DOM 和 XSL 之類的 W3C 標(biāo)準(zhǔn)是一個(gè)整體

簡介：

SVG.js是一個(gè)輕量級的JavaScript庫，允許你輕松操作SVG和定義動(dòng)畫。

SVG（Scalable Vector Graphics，可縮放矢量圖形）是基于XML、用于描述二維矢量圖形的一種圖形格式。SVG由W3C制定，是一個(gè)開放標(biāo)準(zhǔn)。

SVG.js中包含了大量用于定義動(dòng)畫的方法，如移動(dòng)、縮放、旋轉(zhuǎn)、傾斜等，具體可參閱相關(guān)演示。

?易讀的簡潔的語法

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

?針對大小、位置、顏色等的動(dòng)畫元素

?模塊化結(jié)構(gòu)，輕松擴(kuò)展

?各種實(shí)用插件

?各種形狀類型間擁有統(tǒng)一的API.

?元素可以綁定事件，包括觸摸事件

?完全支持不透明蒙版

?元素組

?動(dòng)態(tài)漸變

?填充模式

?完整的文檔記錄

創(chuàng)建一個(gè)SVG文檔

使用SVG()函數(shù)來在一個(gè)給定的html元素中創(chuàng)建一個(gè)SVG文檔：

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

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

以上兩句將在html文檔中產(chǎn)生以下代碼：

<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>

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

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

檢測瀏覽器對SVG的支持度

在使用svg.js之前，可以先用以下的代碼來檢測瀏覽器對svg.js這個(gè)庫的支持情況：

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

ViewBox

<svg>的屬性可以用viewbox()方法來確定，viewbox()方法就像是一個(gè)setter函數(shù)一樣，如下所示：

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

上面的一行代碼和下面的一行代碼是等價(jià)的，前兩個(gè)參數(shù)表示<svg>的位置，后兩個(gè)是其寬度和高度。

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

如果沒有任何參數(shù)，那么viewbox就直接返回一個(gè)空的<svg>：

var box = draw.viewbox()

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

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

如果viewbox中的<svg>的大小和實(shí)際的SVG畫布的大小相同，那么zoom的值就是1.

SVG 文檔

svg.js也可以在htmlDOM外工作，如下所示，是一個(gè)獨(dú)立的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>

感謝各位的閱讀！關(guān)于“javascript中svg有什么用”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！