SVG.js- 輕量且方便的 SVG 動畫函式庫

分享:

SVG 的使用可以讓我們的網頁在互動還有動畫上多出許多變化,但要使用原生的 javascript 去做互動還滿麻煩的,而 SVG.js 就是提供了比較簡潔的方法讓我們可以方便地在頁面上使用 SVG。

官方的範例說明了使用 SVG.js 可以怎樣簡化開發,像這是使用 vanilla js

// Vanilla js
var ns = 'http://www.w3.org/2000/svg'
var div = document.getElementById('drawing') 
var svg = document.createElementNS(ns, 'svg')
svg.setAttributeNS(null, 'width', '100%')
svg.setAttributeNS(null, 'height', '100%')
div.appendChild(svg)
var rect = document.createElementNS(ns, 'rect')
rect.setAttributeNS(null, 'width', 100)
rect.setAttributeNS(null, 'height', 100)
rect.setAttributeNS(null, 'fill', '#f06')
svg.appendChild(rect)

 

使用 SVG.js 則可以簡化成如下:

// SVG.js
var draw = SVG().addTo('#drawing')
  , rect = draw.rect(100, 100).fill('#f06')

 

 

和我們交流

加入我們的社群,裡面會有一些技術的內容、有趣的技術梗,以及職缺的分享,歡迎和我們一起討論。

社團 社群