问题标签 [svg-animate]

我正在使用 javascript 动态创建一个 svg 元素及其内容，并将其添加到我的网页中的 div 中。

我想在调整窗口大小时重新绘制 svg，但是，正在重新绘制元素，但是即使重新创建了这些元素，它们附带的动画也不会重新开始！

不管我做什么，动画只会在页面加载时触发。

我在调整大小事件上尝试了以下操作：

1. 清空 svg，并重新创建其中的元素 - 动画在页面加载时工作，在重新创建时它不会触发

2. 将具有相同动画的新动画元素再次添加到现有元素 - 无论多个动画元素出现在 svg 元素（如 rect）中，它们都不会被动画化！

3. 删除整个svg！3 :) 并从头开始重新创建所有内容，包括 svg 元素和附加到容器 div - 这似乎适用于 chrome 和 firefox，奇怪的是，即使这不适用于 safari！

这怎么可能行不通？它是一个全新的 svg 元素被添加到 DOM 中，但它们上的动画仍然不起作用？

考虑以下代码：

如果持续时间小于超时（5 秒），则动画不可见，如果大于超时，则显示其中的一些。

实际上，svg animate 元素的倒计时是什么时候（假设 beign='1'，这个倒计时到 1 是什么时候开始 -

• 仅在页面加载时？

• 创建动画元素的那一刻？

• 动画附加到父元素的那一刻？

  )

如果不在页面加载时，safari 如何知道该元素先前存在并且动画已完成并冻结，即使在删除并重新创建它之后也是如此？哦

我的目标是 ios 设备，因此必须支持 safari。有没有其他方法可以在调整大小时用动画重绘 svg？

有人可以对此有所了解吗？我被这个问题困住了......任何帮助或信息都会很棒......谢谢。

我想用 SVG 制作这个图形。我可以使用<animate>标签，也可以使用 javascript 操作 SVG 文档。如果可能的话，我更愿意在 SVG 中完成这一切。

是否可以使用 CSS 更改 SVG 矩形的宽度？

这不起作用：

见jsfiddle。

我有一个使用 d3.js 的堆积面积图。我有一个函数可以调整大小并重绘 window.resize 上的可视化。逻辑是根据窗口大小去除 10% 的边距并缩放 x/y 轴。

在这里你可以看到它：

http://porwal.info/direct/demos/d3graphs/area.html

如果窗口大小未接近全尺寸，则当我调整窗口大小（放大或缩小）时，该逻辑起作用。如果高度接近全高，则图形超出预期边界。例如，如果您按 F11 全屏，则图表会溢出。它不仅仅是 F11，而且如果我最大化，有时如果工作正常，有时它会溢出。

相关的js文件是

http://porwal.info/direct/demos/d3graphs/js/area.js

此外，相关的调整大小功能：

（完整的代码可以在我上面给出的链接的 js 文件中看到）。

我被要求比较以下语言并想出最好的生成 2d 图形的语言。你能推荐我最好的吗？Languages are-->webgl,opengl,svg,canvas using html5 我的项目基本上是设计一个移动物体的二维动画，同时设计背景。对象将根据 GPS 信息移动。提前感谢

我有一个饼图 svg 图像，它是从服务器获取的。我的工作是使用snap svg将动画应用于客户端的这个饼图。

现在，问题是我是 SVG 新手，我不知道从哪里开始，但我已经成功地为其他图表类型设置动画。

谁能帮我提供一些推荐链接来解决这个问题。我得到了这个link实现了这个。但他们没有解释他们是如何做到这一点的。

可以通过 snap svg for pie chart 实现的任何其他类型的动画也可以帮助我。

编辑我添加了要制作动画的饼图。我试过这段代码：

它不会为饼图的每个部分设置动画，而是将整个图表作为一个整体进行动画处理。

此行不会在小提琴中执行，因为它需要 Snap.js

任何帮助表示赞赏。

提前致谢。

这可能真的很简单，但我开始学习 svg 并且对以下代码的行为感到困惑：

我期望发生的是矩形在中心点上绕圈旋转。它确实如此。

我希望它也能沿着这条路走下去。它确实如此。

我希望它一旦沿着路径停止旋转。我认为确实如此。

我希望它停留在路径的尽头。它没有。

它重置到起点并停止旋转。所以我不确定是重置停止了旋转还是实际的结束语句停止了旋转。

所以我的问题有两个：为什么会重置以及如何防止这种情况发生。

此外，任何指向良好 svg 教程的链接将不胜感激。虽然我找到了很多教程，但我认为我没有找到质量，因为我觉得这是一个非常简单的问题，我应该从我的研究中知道。

我想我需要一些东西来防止重置，但我不知道是什么。

提前致谢。

我在 IE 10 上显示了一个非常复杂的 SVG 文档。它被拉伸到视口的完整大小并使用该viewBox属性。我注意到文档中的转换层非常慢（比如，1fps 慢）。这在其他桌面浏览器中不会发生。

除了使用 F12 进行 JS 分析之外，任何人都对 IE10 可用的其他工具有想法，这些工具与弄清楚是什么减慢了我的转换速度有关？

我有一个 .svg 文件，它使用 animateMotion 动画一个圆圈来移动。问题是我在页面底部使用 jquery 加载文件。当用户向下滚动时，动画已经播放了。我正在使用当 div 在视口中时运行一个函数的 waypoints jquery 插件。我很想用它来触发 .svg 中的 animateMotion。

非常感谢您的想法和想法。

我有三个点数组，它们定义了三个路径，并且需要沿着每条路径移动一个不同的点，并且可以选择改变速度。这三个数组包含在另一个数组中，所以结构基本上是这样的：

我已经绘制了路径并有一个类似地保存它们的数组，例如：

目前，我已经创建了每个跟踪器：

我尝试采用各种解决方案来解决类似问题，但没有任何效果。我想从让跟踪器沿着路径移动开始，但还需要结合使用我已经创建的滑块更改跟踪器移动速度的能力。