问题标签 [animatetransform]

我正在尝试重新创建以下动画：

我无法让一条线在拐角处正确设置动画。我试过像这样使用 animateMotion-element：

但线条不是圆润的圆角。关于如何让它在拐角处平滑移动的任何想法，如 GIF 所示？

我正在尝试使用 python svgwrite 使对象同时缩放和旋转。到目前为止，我的努力是添加两个连续的“animateTransform”。然而，它似乎只考虑了最后一个动作，如我的示例所示。

任何人都可以帮忙吗？

以下动画 svg 显示了一个从左向右平移的点：

我需要将 svg 保存为动画结尾时的格式为 png/jpg。我目前的方法是为动画设置一个非常短的持续时间，最后使用 fill="freeze" 停止它，然后使用 Javascript 在 Chrome 中自动截屏。但是，一个屏幕截图大约需要 0.3 秒，我需要为数千个 svg 执行此操作，所以我需要加快速度。还有其他方法可以实现吗？谢谢！

假设您有以下 Hello 标签的 SVG 动画，当您单击小方块时会触发该动画：

如果再次单击按钮，如何以相反的逻辑执行相同的动画；即在每（2 n）次点击时将hello元素旋转回其原始状态，并在每（2 n - 1）次点击时将其旋转以再次垂直显示？

请体谅，我是 SVG 初学者。在同一问题上工作了几天后，感谢@Robert Longson（单击按钮时切换SVG动画效果）和this，我走得更远了，但我又被困在这一点上；我不知道如何进行。请仔细阅读，本论坛没有关于相同/相似问题的问题。

我的目标：

A）第一次单击矩形->水平显示文本。

B）第二次单击矩形->另一种意义上的动画，将文本元素旋转+翻译回其初始状态，就像第一次单击之前一样。

C）（这部分不起作用）当然，您应该能够根据需要多次触发此切换。单击矩形至少 3 次，您会注意到问题。出于某种原因，第一个动画（垂直 --> 水平显示）从第 3 次单击开始以 -90 度的偏移量开始，而第二个动画就像一个魅力：

我还缺少什么？

如果您在矩形上连续单击两次，您会看到一个打开和关闭的动画：

我希望它可以工作多次，但它只能工作一次；之后，由于某种原因，第一次单击的旋转起点偏移了 -90 度，正如您在第 3 次单击时会注意到的那样。有任何想法吗？

更新

我注意到以下内容，如果这可能有助于解决问题（仍然无法解决）：使用上面的代码段尝试以下内容：

A) 单击矩形一次

B）再次点击矩形，让标签回到原来的位置

C）在第三次单击矩形之前，将animateTransform标签内的四个标签复制text到一个js变量中，比如说yourSavedAnimateTransformString，然后从标记中删除它们，例如通过

，然后将它们重新插入到与 js 完全相同的位置，例如通过

然后，第三次和第四次单击矩形，您会看到它会在第三次和第四次工作时不刷新页面，但后续单击会再次失败，除非您重复此删除-重新插入过程在矩形上的每 2 次单击，这对我来说是一个相当老套的非解决方案。

我认为此信息可能对解决我的问题有用，因为它表明我的问题与当前标签的无法访问的跟踪状态有关animateTransform，可以通过在每次第二次点击时更新这些标签来消除这种情况。由于这不是一个真正的解决方案，我仍然很想了解这里发生了什么..？

更新 2

为什么上面的代码片段实际上并没有使 Safari 中的转换完全没有变化？根据规范，animateTransform除 IE 之外的所有设备都支持...（完成后我将使用 Fakesmile..）？

我现在才注意到它；您可以在 FF 和 Chrome 中检查我的问题，其中代码段的行为与所述相同。

以编程方式通过document.getElementById("activate_project_10").beginElement()确实有效，但这真的有必要吗？svg animatransforms 在 safari 中的标准方法是什么？

为 SVG 图标设置动画的任务：

宽度、高度、x、y - 单击时更改它们的参数，我需要对其进行动画处理。

问题： 我无法使用 css 或<animateTransform />. 如果 SVG 是circle，它添加动画没有问题，如果 SVG 本身的参数被改变，动画不会被应用

为什么这个在 FF 和 Chrome 中有效的动画在 Safari 中无效（begin="click"不会触发 Safari 中的 animateTransform；替换click为例如 0，您会看到它被触发）？

仅在添加以下 js 时：

动画可以打开和关闭一次，但又会失败。根据规范，Safari 应该支持 animateTransform （我想我会放弃使用 fakesmile 来做到这一点，所以忘记 IE ..）。

关于如何让 Safari 以与 Chrome + FF 相同的方式工作的任何想法？

更新

越来越近，但仍然不完美（多次单击矩形，您会发现它远未优化）.....：小提琴

编辑对应于添加此脚本：

最好使用在动画结束时触发的事件，然后暂停动画。有这样的事吗？我会继续挖掘...

我正在尝试在 中制作动画加载图标svg，尽管每当我在 Chrome 或 Edge 中检查结果时，旋转动画不会对 cx/cy 值做出反应（只有当我将它们设置为零时，它才会正确旋转，否则会有一点摆动）。

我在 Qt 中使用它，QSvgWidget下面的示例运行良好。我只是想了解为什么它在 Chrome 上不起作用。