问题标签 [svg-animate]

任何人都可以发布如何为 svg 折线或路径设置动画的示例吗？

我想为从蓝线到灰线的过渡设置动画。理想情况下，我正在寻找一种解决方案，它可以在不知道其点坐标数的情况下解决任何灰线。

SVG spec by w3c defines wallclock-sync-value as a possible value for "begin" attribute ( http://www.w3.org/TR/SVG/animate.html#WallclockSyncValueSyntax ).
In other words: start animation based on real clock time, not based on times relative to document loading.

I want to create a SVG clock in a situation, where scripting is disabled.

I failed to find any examples of the wallclock usage, but based on the spec and ISO8601 ( http://en.wikipedia.org/wiki/ISO_8601 ) I made following excample:

That should be the rightmost "0" digit in a digital clock, and should flicr every 10 secconds. It works when I set begin="0s".

Unfortunately it does not work as expected. For example in Firefox developer console it gives a js warning(!?!) "Unexpected value wallclock(2000-01-01T00:00:00Z) parsing begin attribute."

Is wallclock-sync-value implemented in modern browsers, and how to use it?

是否有可能在 IE 11 中“飞入”svgpath？

喜欢

为了

这适用于 FF，但无法在网络上找到任何解决方案来在 IE 中做类似的事情。

提前致谢

如何使用 snap.svg 将加载绘制为https://jxnblk.github.io/loading/，

我认为可以使用方法Snap.load，但我希望它在容器中居中。

我尝试用pager.group它来包裹它，但它们都比原来的小。

我也尝试使用 css 来控制它们的样式！

演示链接：http: //jsfiddle.net/icai/w2N47/

当用户将鼠标悬停在它上面时，我想为下面的 SVG 上的齿轮设置动画。也就是说，当鼠标进入时，两个齿轮开始从它们离开的地方旋转。当鼠标离开时，齿轮会停在它们所在的任何位置。如果可能的话，我希望动画开始和结束时使用缓入/缓出功能。如何使用 SVG 动画来做到这一点？

密码笔

If I zoom in and slide my mouse on this rectangles someone of them will stay half-capacity. How can it to fix, to have got ideal situation, as it would be if slide mouse slowly. For example code like this, open with FireFox:

简单的示例，将颜色文本从蓝色更改为红色：

当begin="3s"工作正常但

当begin="accessKey(a)"它不起作用。

浏览器：谷歌浏览器 35.0.1916.153（官方版本 274914）。

PS 我需要 accessKey()仅在 SVG 中，而不是 JavaScript 或其他...

更新：在 FireFox v17 和 v31 中，accessKey(a) 工作正常

我需要为一个反弹 3 次并撞到墙壁并返回的圆圈制作动画。它应该遵循给定的路径。我试过了animateMotion。到目前为止是这样的，

实际上，如下所示是我所期待的，因为我是该地区的新手，感谢任何指导或支持。

我是 SVG 动画的新手，我使用inkscape 制作了一个云，我正在尝试为其颜色设置动画。

这是我的代码：

我在预览时遇到错误...谁能纠正我我错在哪里？

I'm trying to animation a svg star with glittering made in css.

The thing is the star moves toward 0,0 position of svg during the animation. I would like the star to stay in position during the animation.

What I'm guessing is that the position of each points that make the star (in path) are not used during the animation.

I made a codepen so that you can see what I mean.

codepen

Can you help me community? Thanks a lot !