问题标签 [svg-animate]

I don't know how to describe it, exactly. Here's a fiddle, with a Base64'd SVG whose contents are:

(Originally it was a no-repeat background image tucked away in a stylesheet).

Now, in Chrome, this results in what I'd expect:

But in Firefox, something weird happens (excuse the gif's color being off):

It seems that it only renders a frame of the animation if it has to forcefully re-paint the area anyway. Also, hitting run several times renders the SVG in different frames, which baffles me even more (it should be at 0s when the document is loaded...).

This baffles me. I can only assume it's a bug, but I'd like to find a workaround to solve it. The only thing I can think of is making it forcefully re-paint the area where the SVG is at quick intervals, but I don't know how to go about doing that...

Any ideas?

Edit: Maybe the problem is something in the SVG itself, but I'm still clueless as to what.

Edit 2: The problem goes away if I remove the <circle>. What?? This is not an acceptable solution...

由于缺乏 IE 对动画的支持（感谢 IE），我正在构建一个 SVG 并在 snap.svg 中对其进行动画处理。我最基本的形式是一个五边形，我想在悬停时旋转，在鼠标移出时它会自行重置。代码位于下面的小提琴中（显然这是真实事物的缩减版本，但仍然清楚地显示了错误）

JS如下：

此行为的小提琴演示：http: //jsfiddle.net/kfs8o9mw/

五边形在第一次悬停时按预期旋转，然后悬停。但是，当第二次这样做时，五边形会放大和缩小一点，这是完全出乎意料的（它最终以正确的大小结束，但在动画期间却不是）。我已经能够在 IE(10)、Chrome 和 Firefox 中复制它。

这是 snap.svg 中的错误还是代码中有问题？

提前致谢

在使用 w3cvalidator 检查我的网站时

它显示此错误Attribute data-ls not allowed on svg element at this point and End tag svg does not match the name of the current open element (use).

这是我使用的示例代码。

谢谢....

为什么当我将函数添加到 Snap.load(...正在加载 SVG...我的方法...) 时，我无法调用 Snap.Load() 内部的这个方法？

我有一个包含 5 个路径的 SVG 文件，每个路径都分配了不同的 id。路径是从 Illustrator 中导出的。

如何在 D3 中的 5 个 id 状态之间制作动画？在Snap.svg 中，这可以很容易地完成

stage1.animate({"path" : (stage2.attr("path"))}, 1000);

谢谢！

我想将 svg 路径动画转换为纯 javascript 动画。

SVG 代码：

CSS 代码：

这是小提琴

我正在为一个 SVG 中的所有多边形形状设置动画（因此它可以用作 CSS 中的背景）。我很好奇是否有一种方法可以随机生成要使用的值，或者以其他方式使动画每次加载时并不总是从同一位置开始（不使用外部 SVG 库且不使用 JavaScript）？

这是当前的 SVG：

我正在尝试使用下面的代码为力布局有向图上的链接设置动画。链接是简单的线条而不是路径。我按下按钮启动动画。样式更改（在 onTick 中）会立即发生，但问题是动画本身需要大约 10 秒才能开始。难道我做错了什么？我可以加快动画的开始吗？不得不说，一旦动画开始，动画就运行得非常好。

你可以在这里看到一个jsfiddle。即使我指定 .delay(0)，一开始也会有 5 秒的延迟。

与我的 2000 个节点相比，小提琴中的图表非常小。

我想将一种形状更改为另一种形状。我尝试使用 D3.js，当转换发生时，有一点不在地图上。这是示例：

}

你可以在这个小提琴中看到

您可以在转换后看到 2 个不同的结果形状，我想要的是，转换应该从这两个形状之一开始，它应该结束到另一个形状。

有任何想法吗？

我创建了这个 SVG 并放入了一些内联 CSS 来创建悬停效果，但它不起作用。虚线圆圈不会移动和旋转，它只会改变不透明度。此外，鼠标移出时没有像普通 css 过渡那样的过渡。我怎样才能解决这个问题 ？

我的代码小提琴的链接：http: //jsfiddle.net/7s4vszu3/1/