當(dāng)前位置：首頁 > 人文社科 > 生活经验 >内容正文

生活经验

SVG.js 笔记（一）

發(fā)布時(shí)間：2023/11/27 生活经验 38 豆豆

生活随笔收集整理的這篇文章主要介紹了 SVG.js 笔记（一）小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

SVG.js 是一款輕量級(jí)的SVG類庫，并且不依賴任何第三方類庫。

然后是一堆廢話，講框架是如何接近SVG規(guī)范，并且保持輕量級(jí)。接著就是展示一些SVG.js特點(diǎn)，為了讓你相信并使用他。

代碼精簡

通過和競品比較，證明SVG.js是如何輕量級(jí)的。SVG.js用接近一半的代碼量實(shí)現(xiàn)同樣的功能。

快

比競品渲染速度快，但不像vanilla.js那樣快

可讀性高，整潔的語法

用原生JS創(chuàng)建和操作SVG比較繁瑣，只創(chuàng)建一個(gè)矩形就需要很多代碼。但使用SVG.js創(chuàng)建相同的矩形，代碼可讀性好。

動(dòng)畫

安裝方法：

bower， npm，cdn，源代碼下載都可以。壓縮過的svg.js代碼有65KB左右，已經(jīng)算比較小了。用gzip壓縮后大小16KB左右

起步：

簡單，創(chuàng)建一個(gè)HTML文件，聲明一個(gè)具有id屬性的的元素，作為svg.js的掛載點(diǎn)。

<!DOCTYPE html>
<html>
<head><title>SVG.js</title>
</head>
<body><div id="drawing" class="drawing-panel"></div>
</body>
</html>

2、創(chuàng)建SVG DOM對(duì)象，使用SVG構(gòu)造函數(shù)，函數(shù)的第一個(gè)參數(shù)可以是元素的id，或者DOM元素對(duì)象

var draw = SVG('drawing').size(300, 300) // SVG('drawing') or SVG(document.getElementsByClassName('drawing-panel')[0])
var rect = draw.rect(100, 100).attr({ fill: '#f06' })

頁面產(chǎn)生的效果

<div id="drawing"><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>

默認(rèn)情況下，SVG.js 生成的svg大小跟隨父級(jí)元素的大小，就是id="drawing"的div的高度和寬度

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

檢查瀏覽器是否支持SVG：一般瀏覽器是都支持svg的，但是SVG.js 用了某些低版本瀏覽器不支持的屬性方法，所有必要的時(shí)候還是要監(jiān)測瀏覽器是否支持

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

等待DOM加載完畢：一般不需要，大家都習(xí)慣把腳本文件放在body后面，但如果把腳本放到head里，就需要這一步了。

SVG.on(document, 'DOMContentLoaded', function() {var draw = SVG('drawing')
})

SVG.js 只提供了基礎(chǔ)的繪圖方法，至于工程上的拖拽，可視化繪制等等都需要自己手動(dòng)添加。好在SVG.js有良好的社區(qū)，還有其他一些擴(kuò)展插件，大多數(shù)的功能都可以通過插件或自行開發(fā)完成。

轉(zhuǎn)載于:https://www.cnblogs.com/zhang-jian/p/8892509.html

總結(jié)

以上是生活随笔為你收集整理的SVG.js 笔记（一）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。