我刚开始研究动画 svg 图形，它看起来很复杂。

我坚持一个看似简单的问题。我想将一个元素动画到一个新的地方，但我想在设定的时间内完成。

当我更改时，我尝试使用我当前的代码，我得到一个出现的矩阵属性，但我无法修改它，有谁知道如何在设定的时间量内从左到右为对象设置动画。

我做了一个速度测试来比较 Snap.svg (SVG) 和 FabricJS (CANVAS)：http: //jsbin.com/tadec/7 function dummy()。

在 Chrome 中，SVG 渲染时间为 120 毫秒，而 CANVAS 渲染时间为 1100 毫秒。SVG 比 CANVAS 快 9 倍。

Fabricjs.com 页面在此示例中显示 Raphael 需要 225 毫秒，而 Fabric 需要 97 毫秒（解析：80，渲染：17）。

我有一个印象（在阅读了 fabricjs.com 和paperjs.org之后）FabricJS 和更普遍的 Canvas 比 SVG 更快。

我的速度测试声称 SVG 比 Canvas 快得多（至少 Snap.svg 似乎比 FabricJS 快得多）。

为什么 FabricJS 在我的测试中这么慢？相比之下，我是否犯了一些错误，因为我很惊讶 SVG 在我的速度测试中似乎比 Canvas 快。

编辑：我的问题分为两部分：为什么 FabricJS 中的渲染速度要慢得多，为什么还要拖动速度？

我试图为现代浏览器找到合适的 SVG 库。我的目标是决定，什么库适合创建简单的在线 SVG 编辑器，例如。文本和路径编辑和剪切带有路径的文本。

我找到了两个可能合适的库：Snap.svg和Svg.js。

SNAP.SVG

Github：https
://github.com/adobe-webplatform/Snap.svg 源代码行：6925 Github Stars：3445
Doc：http
://snapsvg.io/docs/ 入门：http ://snapsvg.io/start /
入门示例 ( JSBIN )

SVG.JS

Github：https
://github.com/svgdotjs/svg.js 源码行数：3604 Github Stars：1905
Doc：https ://svgdotjs.github.io/

入门示例（JSBIN）：

用法似乎很相似。

这两个库之间的主要区别是什么？

有没有办法mouseenter在其他元素后面的 SVG 元素上触发事件？似乎顶部元素正在捕获事件并且它没有使 DOM 冒泡。

或者，是否有一种检查鼠标是否在特定 SVG 元素上的好方法？

澄清一下，我正在尝试实现一个类似“拖放”的功能，我根据后面的元素更改前面的元素。请注意，元素不是嵌套的。

jsfiddle：http: //jsfiddle.net/az6Ug/

使用 Snap.svg 库，我想拖动 SVG 并获取鼠标位置。我需要内部矩阵上的鼠标位置，而不是浏览器鼠标位置。我有一个问题，那就是如果 SVG 所属的窗口上有任何滚动，则计算出的鼠标位置会被滚动条上的滚动量所抵消。

例如，没有滚动则可以正常工作。或者在滚动条上垂直滚动10px，鼠标位置计算为：真实位置+10px。如果有任何水平滚动也是一样的：被滚动量抵消。

在 jsFiddle 中，我使用一个矩形来显示拖动时计算的鼠标位置。如您所见，如果没有滚动，则矩形会停留在鼠标光标上（左上角）。但是通过一些滚动，矩形会从鼠标光标偏移。

虽然我使用的是 Snap.svg 库，但我只使用它来获取拖动事件，鼠标计算是纯 Javascript。一种可能的解决方案是通过滚动量减去 X 和 Y，但我认为使用 SVG 的转换函数会有更好的方法。

这是我第一次尝试使用 javascript/jquery/snap 为 SVG 设置动画，我发现即使在一些最近的设备上（在 iPhone 4s 上测试），动画也不能很好地运行。似乎是性能问题？

我正在尝试为嵌入到我的 html 中的 svg 中的许多分组元素设置动画。它们在页面加载时动画，这是相关代码。

注意：我的 svg 是在动画的“结束”状态下在 illustrator 中绘制的，所以我使用 snap 将它们偏移，然后动画回到它们的自然位置

发生的情况是开始状态初始化良好，但动画本身不会运行，并在几秒钟的延迟后简单地弹出到结束状态。

是否有更好的方法来处理这些动画，使它们表现得更好一些？

我是否可能需要编写一个自定义绘制循环，然后使用 requestAnimationFrame 或类似的东西调用它？（我对这个概念很陌生，帮助！）

我正在 Raphael 中进行动画变换（和 Snap.svg，它也是如此）。

如果我对基本元素应用旋转，它会像我预期的那样正常旋转。但是，如果我已经应用了先前的变换（即使它的 t0,0 或 r0），则元素似乎会缩小和备份，就好像它总是必须适合其先前的边界框或其他东西。

这是一个示例小提琴

关于正在发生的事情，我在动画变换中是否缺少明显的东西？

我正在尝试用 Snap 包装现有的 svg 元素。当我尝试创建一个圆圈时，我收到一个错误：

var e = document.getElementById("svgId");
var paper = Snap(e); var button1 = paper.circle(20,20,50);

上面的代码会产生这个错误：

未捕获的类型错误：对象 [对象对象] 没有方法“圆”

我对 js 很陌生，对 svg 更是如此。非常感谢有关此问题的任何帮助。

以下演示产生相同的错误：

我刚开始使用 snap.svg，有点迷茫。

我想要实现的是以下。从我的 JavaScript 文件中，我想将 SVG 加载到 div 中。然后，一旦将鼠标悬停在 SVG 内的 A 元素上，就会产生动画效果。我已经能够让这段代码在页面上运行，但我想将所有 JavaScript 代码保存在一个 JavaScript 文件中。

这是当前有效的页面代码：

这是我试图在我的 JS 文件中运行的代码：