问题标签 [svg-animate]

我被饼图困住了，它应该在加载时顺时针动画。这是我的饼图小提琴

我需要这个动画来处理 brezier 曲线路径，例如，

我也知道，它可以使用 snap.svg 库来实现，但在这种情况下无法锻炼。

任何帮助表示赞赏。

提前致谢！

我有一个 17 秒长的第二个动画，其中包含多个部分。完成后如何重复整个序列？我尝试repeatCount = "indefinite"了每个属性<animate>，但这只是让事情变得奇怪。这是我想要重复的动画，供参考或其他东西。

我发现了这个很酷的 SVG 边框动画，我尝试将它应用到我的网站，但是我的网站包含不同大小的图像，因此动画受到宽度和高度的限制。

有什么方法可以编辑代码，以便我可以将此动画用于所有图像尺寸？

对不起我的英语不好:)

I doing SVG animation of some physical process using svg (basically I want whole animation as a single svg file).

Example can be seen here: https://s3.amazonaws.com/public-bucket-vzi0CDPFDE4ywJfvfylfpnDW/dwg.svg .

Now I'd like to add label stating: "Time: 1.23ns" displaying current time. I couldnt find any obvioius way to replace contents of text object, insert format current time inside text element.

It would also be great if this animation wasn't using javascript, just SVG animation.

我正在尝试动态确定 SVG 路径数组的长度，然后将此值插入到属性的 HTML DOM 样式对象中，stroke-dasharray并且stroke-dashoffset.

在此处找到的示例中，所有.hLine路径（所有水平线）都应该设置动画，但它们没有。这是因为strokeDasharray不strokeDashoffset支持吗？

在以下示例中，我需要同时执行所有动画。但只适用于最后一个。

动作已被js触发：

我正在使用 D3.js 和 Google Map 创建动画地图。我在 Google Map顶部的叠加层中使用 d3.js（如教程中的说明，名为Google Map + D3 ）创建了圆圈。直到这里一切正常。这是创建地图和圆圈的代码（代码真的很乱，但我是 d3.js 新手）：

然后，我为圆圈设置动画以显示 24 小时内发生的情况。在我的 json 文件中，每个点/圆有 24 个以“h_”开头的变量 + 时间（例如 h_0、h_1、h_2、h_3 ...）要遍历这些变量并更新我的圆的半径，我使用一个 ui 滑块。这是更新功能和滑块功能：

这很好用，圆圈是基于 ui.value 的动画。

但是当我放大地图并更改滑块值时，什么也没有发生。滑块仍然可以使用，但我的圆圈不再为它们的半径设置动画。我在控制台中没有错误。

基本上，如果更改默认缩放，我的更新功能将不再起作用。

我真的不明白为什么，在放大谷歌地图后，即使我回到默认缩放级别，圆圈在 ui 滑块更改时也不再改变其半径。

在此先感谢您的帮助。

我有一个 snap svg 动画，它可以为一堆圆圈设置动画，如果它们彼此之间有一定的距离，则会在它们之间画一条线。但是，我意识到我可以做很多优化，但我不确定如何去做。我觉得这将是有用的

1. 在 snap 中有一个很好的接近检测示例
2. 有更多关于在 snap svg 中优化动画的信息。找到它并不容易。

这是动画的一个工作示例：

http://jsfiddle.net/heaversm/sbj4W/1/

以下是我认为可以优化的内容：

每个圆圈都调用自己的动画函数 - 圆圈都已添加到一个组中，我猜有一种方法可以将随机运动应用于组的所有成员，这比为每个元素调用一个函数更有效组内。

接近函数很尴尬 - 对于每个圆圈，对于每个更新周期，我必须遍历所有其他圆圈的数组，并找出 X 和 Y 坐标是否足够接近以绘制一条线。另外，这意味着你得到了重复的线，因为每个圆圈都会向它的邻居画一条线，而不是在两者之间有一条共享线。

相应地，我每个圆圈的动画功能都会清除屏幕上的所有线条。理想情况下，所有圈子都将共享一个更新功能，并且在该功能中，您将清除线条。

现在，我可以告诉渲染器无法跟上所有各种动画/循环。任何优化上述事情的帮助（或任何其他你可以看到我做的奇怪的事情，将不胜感激。

我正在尝试创建一个永远重复的反弹动画。我遇到的问题是 snap 似乎没有执行我放在回调中的动画。github 上似乎有一些问题描述了 Snap 回到 0.1.1 的这个问题，但它们已经被关闭了。有没有其他人看到过这样的事情？

当前代码，它将运行动画的第一部分然后停止：

SVG 动画在 chrome 中正常工作，但在 Firefox 中不正常。我试图在页面加载后 0.4 秒开始动画。这是代码

我究竟做错了什么 ？