SVG.js 筆記（一）

時間 2019-11-08

標籤 svg.js svg 筆記欄目 JavaScript 简体版

原文原文鏈接

SVG.js 是一款輕量級的SVG類庫，而且不依賴任何第三方類庫。html

而後是一堆廢話，講框架是如何接近SVG規範，而且保持輕量級。接着就是展現一些SVG.js特色，爲了讓你相信並使用他。npm

代碼精簡

經過和競品比較，證實SVG.js是如何輕量級的。SVG.js用接近一半的代碼量實現一樣的功能。瀏覽器

快

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

可讀性高，整潔的語法

用原生JS建立和操做SVG比較繁瑣，只建立一個矩形就須要不少代碼。但使用SVG.js建立相同的矩形，代碼可讀性好。svg

動畫

安裝方法：

bower， npm，cdn，源代碼下載均可以。壓縮過的svg.js代碼有65KB左右，已經算比較小了。用gzip壓縮後大小16KB左右函數

起步：

簡單，建立一個HTML文件，聲明一個具備id屬性的的元素，做爲svg.js的掛載點。動畫

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

二、建立SVG DOM對象，使用SVG構造函數，函數的第一個參數能夠是元素的id，或者DOM元素對象spa

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' })

頁面產生的效果插件

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

默認狀況下，SVG.js 生成的svg大小跟隨父級元素的大小，就是id="drawing"的div的高度和寬度code

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

檢查瀏覽器是否支持SVG：通常瀏覽器是都支持svg的，可是SVG.js 用了某些低版本瀏覽器不支持的屬性方法，全部必要的時候仍是要監測瀏覽器是否支持

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

等待DOM加載完畢：通常不須要，你們都習慣把腳本文件放在body後面，但若是把腳本放到head裏，就須要這一步了。

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

SVG.js 只提供了基礎的繪圖方法，至於工程上的拖拽，可視化繪製等等都須要本身手動添加。好在SVG.js有良好的社區，還有其餘一些擴展插件，大多數的功能均可以經過插件或自行開發完成。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

SVG.js 筆記 （一）

代碼精簡

快

可讀性高，整潔的語法

動畫

安裝方法：

起步：

SVG.js 筆記（一）