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

建網(wǎng)站原本是網(wǎng)站策劃師、網(wǎng)絡程序員、網(wǎng)頁設計師等，應用各種網(wǎng)絡程序開發(fā)技術和網(wǎng)頁設計技術配合操作的協(xié)同工作。成都創(chuàng)新互聯(lián)專業(yè)提供成都網(wǎng)站建設、網(wǎng)站設計,網(wǎng)頁設計,網(wǎng)站制作(企業(yè)站、成都響應式網(wǎng)站建設公司、電商門戶網(wǎng)站)等服務,從網(wǎng)站深度策劃、搜索引擎友好度優(yōu)化到用戶體驗的提升,我們力求做到極致!

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

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

什么是SVG？

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

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

SVG 使用 XML 格式定義圖形

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

SVG 是萬維網(wǎng)聯(lián)盟的標準

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

簡介：

SVG.js是一個輕量級的JavaScript庫，允許你輕松操作SVG和定義動畫。

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

SVG.js中包含了大量用于定義動畫的方法，如移動、縮放、旋轉、傾斜等，具體可參閱相關演示。

?易讀的簡潔的語法

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

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

?模塊化結構，輕松擴展

?各種實用插件

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

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

?完全支持不透明蒙版

?元素組

?動態(tài)漸變

?填充模式

?完整的文檔記錄

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

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

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

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

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