问题标签 [svg-animate]

我的意思是在我的 SVG 停止完成动画后，我希望动画重新开始并结束，然后重新开始，依此类推。

我试过了：

但它不起作用。

您可以无限制地停止和重复动画，但如果您重新启动一个不确定的动画，它将失去其累积值并从初始值开始。

也许我应该举个例子来澄清一下；看这个动画：

如果我停止这个动画，并开始一个不同的（比如id="second"）影响同一个对象的旋转，second将从停止的点完美地继续main。但是，如果我通过单击startbox（或实际上通过任何其他事件）开始这个，它将减去所有差异main并在开始之前重置旋转。

我想要的是一个适当的“暂停”，我可以在动画之前停止的地方继续。当然，我可以添加固定数量的相同动画和相同数量的相同开始/停止按钮来模拟效果，但这不是一个好的解决方案。特别是因为暂停的次数是有限的。

整个例子（似乎只在 Opera 中工作）

我正在编写一段 SVG 代码并遇到以下问题：

如果 SVG 未通过窗口 onload 事件附加到文档，则 animateTransform 标记将不起作用（无法启动动画）。

示例： http: //jsfiddle.net/r4WEh/ 与 http://jsfiddle.net/r4WEh/1/

唯一的区别是：

对比

在第一个中，svg 通过窗口 onload 事件添加到 dom。在第二个中，svg 在 mouseclick 事件中添加到 dom 中。

任何帮助将不胜感激！

此 SVG 动画代码为每个矩形生成不同的速度。我需要相似的速度（不同的持续时间）。是否有一个我找不到的属性，或者一个简单的解决方案。

我想为一个矩形设置动画，使其遵循迄今为止使用的给定路径animateMotion。这就是我得到的：

现在我的问题是：如何让矩形跟随路径（已经实现），矩形（20 20）的中心始终在路径上？这可以通过 SVG 提供的方式实现吗？

有人可以告诉我为什么这段代码：

http://jsfiddle.net/j2spu/2/

我认为适用于 FF、Chrome 18 至 19、Safari、rekonq 等，但不适用于 Chrome 20 至 24？

我有一个圆，里面有一个边界环（绿色和静态），还有一些“脉冲”外圆（蓝色）。我将如何解决这个问题，只让静态圆圈内的“脉冲圆圈”部分可见？

我还包括了用于呈现 HTML 的 JS 供您参考，但它不会在 JSFiddle 中生成 SVG。

我认为 SVG 中存在图层，但考虑到我如何构建其他圆圈的渲染，这并不是很有帮助。 快速回顾一下它的工作方式。

1. 用橙色渐变绘制背景圆，并在其上放置同心圆。
2. 画出绿色的静态圆圈。
3. 将四个脉冲放在笛卡尔平面的基点上。
4. 动画脉冲。

我知道我可以在主圆圈的边界内测量一次点击，所以我希望我可以将脉冲的动画（可能是一种 hacky 方式）限制在绿色圆圈内。

也许放在顶部的其他圆圈具有反向填充或其他东西？只是吐出想法，因为我已经尝试了我所知道的一切并且找不到任何其他示例或想法研究。

可能会帮助您帮助我想到实现此目的的方法的相关文章：

如何计算（圆的）弧的 SVG 路径

我正在将点添加到与世界各地的推文相对应的地图上。添加推文时，它将由一个红点表示。

在接下来的 30 秒内（与 Tweet 轮询延迟相同的时间间隔），这些点会慢慢变黑，表明它们已经过时了。

下面的代码就是这样做的，但是在第一次轮询之后，随后的轮询会将地图上所有新旧点的颜色更改为红色。此外，渐变动画仅在映射第一组点时发生。

任何想法为什么？

这是正在运行的地图。在现代浏览器中查看。

介绍

SVG我知道一些同时使用JavascriptDOM<animate>元素的基本动画技术。所以我创建了这个 SVG，但我不知道如何在没有太多代码的情况下每 x 秒触发一次动画。我试过begin="4s"了，但它只等待第一次。

问题：

有一个类似beginor的 DOM 属性dur，但是要以秒为单位定义间隔？实现这一目标的更好方法是什么？

我尝试过的：

此处的完整示例：SVG Fiddle

笔记：

• 我已经检查了SVG 规范
• 添加一些 Javascript 代码是一个选项
• 使用 CSS3 也是一种选择

如果存在具有默认枢轴点（0,0）的svg旋转（度），那么我可以将旋转变换矩阵计算为

但是如果枢轴点不是（0,0），让我们说（px，py）那么我如何计算旋转变换矩阵？