【SVG.js】简介

SVG.js

The lightweight library for manipulating and animating SVG.
用于操作和移动 SVG 的轻量级库。

为什么选择 SVG.js?

SVG.js has no dependencies and aims to be as small as possible while providing close to complete coverage of the SVG spec. If you’re not convinced yet, here are a few highlights.
SVG.js 没有依赖关系，旨在尽可能小，同时提供接近 SVG 规范的完整覆盖。如果您还不相信，这里有一些亮点。

快速的（It’s speedy.）

SVG.js is fast. Obviously not as fast as vanilla js, but many times faster than the competition:
SVG.js 很快。显然不如 vanilla js 快，但比竞争对手快很多倍：

可读性强，语法简洁（Easy readable, uncluttered syntax.）

Creating and manipulating SVG using JavaScript alone is pretty verbose. For example, just creating a simple pink square requires quite a lot of code:
仅使用 JavaScript 创建和操作 SVG 非常冗长。例如，仅仅创建一个简单的粉色方块就需要相当多的代码：

// 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 provides a syntax that is concise and easy to read. Doing the same as the vanilla js example above:
SVG.js 提供了一种简洁易读的语法。执行与上面的 vanilla js 示例相同的操作：

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

That’s just two lines of code instead of ten! And a whole lot less repetition.
那只是两行代码而不是十行！并且少了很多重复。

致力于动画实现（Go crazy with animations）

详细了解

还有更多（There is more…）

• animations on size, position, transformations, color, …
• 大小、位置、变换、颜色等动画
• painless extension thanks to the modular structure
• 模块化结构，无痛扩展
• various useful plugins available
• 各种有用的插件
• unified api between shape types with move, size, center,…
• 形状类型之间可用的统一 api，包括移动、大小、中心、
• binding events to elements
• 将事件绑定到元素
• full support for opacity masks and clipping paths
• 完全支持不透明蒙版和剪切路径
• text paths, even animated
• 文本路径，甚至动画
• element groups
• 元素组
• dynamic gradients and patterns
• 动态渐变和图案
• fully documented (you’re looking at it 😃