Snap.svg vs Svg.js
我试图find适合现代浏览器的正确的SVG库。 我的目标是决定，什么库适合创build简单的在线SVG编辑器与例如。 文本和path编辑和剪报文本与path。
我find了两个可能合适的库： Snap.svg和Svg.js。
SNAP.SVG
Github： https ： //github.com/adobe-webplatform/Snap.svg
源代码行：6925 Github星级：3445
Doc： http ： //snapsvg.io/docs/
入门： http : //snapsvg.io/start/
启动器例子（ JSBIN ）
var draw = Snap(800, 600); // create image var image = draw.image('http://img.dovov.comshade.jpg', 0, -150, 600, 600); // create text var text = draw.text(0,120, 'SNAP.SVG'); text.attr({ fontFamily: 'Source Sans Pro', fontSize: 120, textAnchor: 'left' }); // clip image with text image.attr('clip-path', text); SVG.JS
Github： https ： //github.com/svgdotjs/svg.js
源代码行：3604 Github星级：1905年
Doc： https ： //svgdotjs.github.io/
初学者例子（ JSBIN ）：
var draw = SVG('drawing'); // create image var image = draw.image('http://img.dovov.comshade.jpg'); image.size(600, 600).y(-150); // create text var text = draw.text('SVG.JS').move(300, 0); text.font({ family: 'Source Sans Pro', size: 180, anchor: 'middle', leading: '1em' }); // clip image with text image.clipWith(text);
用法似乎很相似。
这两个库的主要区别是什么？
我是svg.js的创造者（所以我也有偏见:)。 你将不得不一一尝试，看看最适合你的是什么。 使用SVG.js我尝试保持语法更基于JavaScript，所以一切都更dynamic，而Snap通常使用基于string的语法。 这使得最终的代码在SVG.js中通常更具人性化，我当然更喜欢它。 我们以一个渐变为例。
SNAP.SVG：
var g = paper.gradient("L(0, 0, 100, 100)#000-#f00:25%-#fff"); paper.circle(50, 50, 40).attr({ fill: g });
SVG.JS：
var g = draw.gradient('linear', function(stop) { stop.at(0, '#000') stop.at(0.25, '#f00') stop.at(1, '#fff') }) draw.circle(80).center(50,50).fill(g)
Snap.svg语法更加简洁，SVG.js代码更具可读性。 所以这真的是一个品味的问题。
通常SVG.js更加面向对象。 一切都是一stream的，甚至是数字和颜色 ，因此是可扩展的。 由于OO结构，在任何级别编写插件和扩展现有对象都非常容易。
我原本试过Snap，因为它有一个很好的网站，似乎很好的文档。 在几个我无法解释的问题之后，我决定尝试使用SVG.js。 我无法确定为什么，但SVG.js似乎更容易编写; 更直观。 我并不是说Snap是坏的，但它不符合我的风格，文档内容有点稀疏。
我不确定你会得到一个没有偏见的答案，因为大多数人都会有一个或另一个的经验。
由于两者基本上都是基础SVG规范的接口，所以你应该可以做任何事情，所以我也不用担心select。 解决scheme将是类似的，而不是看到差异。
我对Snap有更多的经验（如此有偏见），但是看看这些文档，我的印象是svg.js似乎在animation和文本等方面有更多的糖，而Snap可能有更多的东西比如matrix（我发现这些matrix有时候会非常有用），而且似乎支持一些额外的东西，比如触摸元素（我怀疑它们在某种程度上是可用的，部分依赖于浏览器支持，但是像触摸支持可能会越来越重要与SVG）。
最终，我只是在一个或另一个编码，而不用担心。 我想如果你理解SVG，你将能够在它们之间交换相对容易，如果你需要的话。
