问题标签 [svg-animate]

我正在通过 Javascript DOM 使用 HTML5 SVG 构建图形。

我使用动画沿其 x 坐标（y 常数）移动 svg 元素（即主 svg 元素的子元素）。

稍后我通过 svg 元素访问动画元素，并开始动画

直到这里一切都很好。

但是在动画结束时，注册的处理程序不会被调用。

我也尝试了以下方式，但这也没有成功。

我在通过 Javascript DOM 构建 SVG 的论坛上进行了广泛搜索。但是在通过 javascript DOM 注册动画事件属性时找不到任何帮助。

我在这个论坛检查的一些问题

如何通过javascript添加动画svg？

检查动画何时在 SVG 中结束

更新代码

使用我的 svg 文件：

此代码实现了所需的转换，但是当矩形旋转时，它的一部分没有显示出来。

这个答案已被接受，但它不起作用，因为 gloomSet.animate({cx: 100}) 不会像圆圈一样移动发光。此外，要为焕发集路径对象设置动画，您需要应用一个转换，类似这样，但一个简单的移动转换会将辉光路径缩小到 0。

当前方法作为js fiddle，还是有更聪明的方法来实现相同的目标？：

我正在尝试使用 jQuery 为 SVG 的路径数据属性设置动画。

目前，我已经创建了 SVG，并存储了两条路径，以及一个添加动画元素的按钮。

当我直接更改属性（由第一个 svg 显示）时，我取得了成功，尽管动画不会改变第二个 svg 上的任何内容。

任何帮助都会很棒。这是小提琴：http: //jsfiddle.net/vB8tu/1/

我正在尝试一个动画，其中一个矩形从 1 缩放到 3，然后应该缩放回 1。但是，问题是缩放应该从左上角开始并在右上角结束。

我想在纯 SVG 标签中实现这一点，而不是 D3 或 raphael.js。如何做到这一点？我尝试了很多方法，但没有得到很好的输出。

I have created a real-time graph where new data points are continuously being fed in and plotted.

Currently I am using requestAnimationFame() where I render the updated positions of the elements 30 times per second.

With many SVG elements, this can get a little slow.

What is the most efficient way to implement a continuously scrolling graph like this with SVG animations, CSS animations, or CSS transitions. (Without 3rd party libraries).

Thanks in advance.

我想模拟有连续传入的实时（动态）数据并馈送到图表的情况

因此，我尝试使用 d3 演示一个动画折线图，同时要求数据数组每 1 秒连续更新一次。

原作的灵感来自benjchristensen

这是我修改后的 html 源代码：我的源代码

我尝试通过调用函数来buffer[100]填充random number for every 1 secondstartGenerator()

以下是FeedDataToChart()参数名称：

我用 acounter检查重绘数据索引，每次重绘新数据时，counter增加1. 直到counter < data.length-1，re-draw timer应该停止并buffer[100]再次从那里获取新数据。

当我尝试重复该功能时出现我的问题startGenerator()，结果显示如下：

我对javascript很陌生。谁能指出我如何从buffer每个中提取数据1 second并不断更新单个折线图？

谢谢！

编辑我更新了源和问题已最小化：我的新源

我在 处添加该.remove()行stopTimer()以删除 sgv 保存的数据并重置global buffer to null并再次调用该startGenerator()函数以在计时器停止时提取新数据。

现在我遇到的唯一问题是每次创建新图形时，它都会在前一个下方创建一个新的 sgv 路径。每次创建新图表时，它都会向下移动。检查我今天更新的新来源。运行代码后，您将看到我的描述。

每次更新时，如何将 sgv 路径固定在同一位置？

I'm trying to emulate a 3d rotation among the y-axis for some paths I have in an SVG. I've found the library SVG3D https://code.google.com/p/svg3d/ and I've given it a try.

The problem is that you can only control the ticking interval duration and the increment (in radians) of each "tick" (there's a setInterval timing function that calls the transform() function which executes the rotation).

There's a toggleRotation function, that works like a play-pause command, but it doesn't give you any control of the timing and rotation of the path.

I have the following example code for my path:

So, how could you control the spinning and speed of the objects? Is it possible to include an easing function to control the speed of each rotation?

我在一个组中有一堆 svg 圈子。

我希望它们每秒向左移动 30 次以创建滚动效果。

我以 1/30 秒的间隔使用 requestAnimationFrame，我申请

在 chrome 时间线调试工具中显示设置此变换属性会导致重新计算布局，这是相当昂贵的。根据这篇文章：http ://www.html5rocks.com/en/tutorials/speed/high-performance-animations/我认为这不应该发生。

我实现这种滚动效果的最有效方法是什么？

提前致谢。

我有一个 svg 里面有一张图片，我想知道我可以用 CSS 为它制作动画吗？

我让它在悬停时进行变换，但它有点跳跃，这是一个奇怪的效果，但后来我想我想如果它是动画的话，可能有可能让它看起来更自然，比如反弹效果我已经在 CSS3 动画中看到过。

有人对我如何从 svg（文本字符中的 png）内部执行此操作有任何想法吗？

它在我的网站上看起来比在这个JSFiddle中更好，因为某种原因它有点模糊。

SVG 代码：

没有JS 或框架请

更新所以我找到了 SVG 的标签，但如果不移动整个对象（即三角形，这不是我想要的），我将无法旋转图像或让它四处移动（我会吗？） .)

小提琴现在动画不透明（虽然不是很好，永远不会完全不透明）

更新 2 Randak 在评论中说，它在我的网站上看起来很模糊，我使用的是最新的稳定版 Chrome (Chrome OS)，它在小型和大型方面看起来都不错......