问题标签 [svg-animate]

我所拥有的是一些由 JS 代码动态生成的 svg 元素，例如由一些几何图形组成的线条和圆圈，我想要实现的是尝试使用 svg 动画功能不断地重新缩放图形。我的意思是我当然可以重新计算线的每个点和圆的中心点的坐标并从那里开始，但这将是一个太乏味的解决方案，我该如何做得更好？

非常感谢！

我正在使用该svg:use元素将动画 SVG 微调器嵌入到具有许多节点的大型 D3.js 树中。

一个节点如下所示：

当需要时，我使用 JQuery 在树中的众多g.node元素之一中插入微调器。

spinner的SVG源码如下：

这在 Firefox 中完美运行，但在 Chrome 或 Safari 中却不行。在 Chrome 和 Safari 中，仅显示动画的第一个“帧”，但微调器没有动画。

有谁知道如何解决这个问题？

谢谢！

我刚开始使用 D3.js，我想创建类似于我们在 Paint 中绘制线条的东西。步骤应该是相同的： - 单击屏幕上的一个点 - 拖动到目的地以创建一条线。

我现在遇到的麻烦是当您将鼠标拖动到目的地时，该线应该根据您的鼠标移动。我怎样才能做到这一点？

谢谢。

我正在尝试模拟 SVG 中元素的移动，我有一些圆圈，当一个圆圈接触另一个圆圈或开始隐藏它时，我需要获取事件。有属性或功能吗？提前致谢

我在大多数现代浏览器中遇到了文本动画/缩放的伪影：Chrome 29、IE10、Safari 5.1 (Windows)、Safari 6.0.5 (Mac) 和 Opera 16。只有 Firefox（使用版本 23 测试）工作正常（所有在 Windows 上，Safari 6 除外）。

例子：

http://jsfiddle.net/jejPS/1/

将鼠标悬停在“uf”标签上。文本将放大。离开标签时，“f”会在缩小时留下痕迹。

背景：

这是标签云的一部分。SVG 元素由公司内部库生成（在 jsfiddle 中硬编码）。我增强了我们的实现，在悬停功能上添加了这种缩放。

使用 transform: scale(2) 或当前字体大小转换 (:hover -> 2em) 都没有关系。在没有这些工件的情况下，我还没有找到任何使用 CSS3/SVG-Animations 缩放 svg-text 元素的方法。

注意：这似乎只发生在某些字符上，如“f”或“t”。但是我尝试过的每一种字体

我尝试了几种解决方法：

不同的 CSS3 属性以获得更好的渲染效果：

或使用

乃至

在所有提到的浏览器中都具有相同的效果。

我还没有提交任何错误报告，因为我很难想象 WebKit、Presto (Opera) 和 Internet Explorer 10 都有相同的渲染错误。我希望有另一种在 SVG 中缩放文本的方法，我还不知道。

非常感谢您的帮助！

编辑：错字

我有一个 HTML5 视频标签和一个 SVG 动画。我想要实现的目标 - 播放视频时，我希望动画以与视频相同的速度移动。动画看起来像这样

所以每一秒我都会改变from和to参数。结果与我想要实现的目标非常接近，但有时（几秒钟内一次）就像我认为来自我不知道如何精确增加fromand的东西一样微小的冻结/闪烁to。

那么如何让它与视频一起流畅地工作呢？

先感谢您

如果我有一个 SVG 元素和多个与之相关的动画元素，哪个动画将首先执行并在 SVG 上生效？

示例代码：

如果动画来自不同的类型 - animateTransform、animateColor、animate、animatePath 有什么区别吗？

先感谢您

我想创建一个美国的交互式地图。每当用户将鼠标放在一个状态上时，我希望多边形转换为一个悬停矩形，其中填充了用户可以单击的信息。我是否需要创建一个通常不可见的矩形，直到鼠标悬停在它上面，还是有其他方法可以解决这个问题？以下是我想要发生的事情，我不知道如何执行它。

最终，这是针对将在 Firefox 中运行的 Kiosk 样式应用程序（使用 jQuery 1.6.4），因此答案可以是特定于 Firefox 的。

我正在尝试制作动画 SVG，但我正在尝试通过动态插入 SMIL 来对其进行动画处理。我没有看到任何迹象表明它无法完成，并且http://satreth.blogspot.ch/2013_01_01_archive.html和http://srufaculty.sru.edu/david.dailey/svg/SMILorJavaScript.svg似乎都表明它可以做到。

据我了解，问题是我需要调用该beginElement方法来启动动态插入的动画，但我在任何地方都看不到它。

这是一个演示问题的小提琴：http: //jsfiddle.net/2pvSX/

未能回答标题中的问题：

1. 我究竟做错了什么？
2. 是否有任何资源可以更好地理解我正在尝试做的事情？

这是一个问题：

1. 我如何定义 SVG？
2. 我如何创建 SMIL？
3. 我如何访问 SVG？
4. 我如何插入 SMIL？
5. 完全不同的东西？

最后，有没有更好的方法来为 SVG 设置动画？

我将 SVG 设置为元素的背景图像。第一次显示元素时，动画会正确播放。

在随后的显示中（例如，如果通过 JavaScript 注入元素的副本，或者如果背景图像被删除并使用 CSS/JavaScript 添加回来），动画不会从头开始。我认为这是预期的功能，因为图像不被认为已被浏览器重新加载 - 它使用已经动画的内存版本。

这是一个演示（不是我的）： http ://www.luigifab.info/public/svg-smil/test.html

Firefox和Chrome有一些相关的浏览器错误报告，但如上所述，我认为这是预期的功能。

有什么方法可以让我的 SVG 动画在图像显示时重置/重播？

理想情况下，我正在寻找仅使用 CSS 和 SVG 的解决方案 - 如果不可能，则使用 JavaScript 解决方案。