问题标签 [animatetransform]

SVG animateTransform not working same as the css3 transform.

我有一个包含 3 个自定义控件的面板。现在，在运行时，在任何给定时间点我只有其中两个可见，即顶部两个或底部两个控件始终保持中间控件可见。

因此，当顶部控件折叠或不可见时，中间控件向上移动并显示为顶部控件，如果底部控件折叠，则中间控件位于底部。

因此，至于我的问题，我希望使中间控件向上或向下移动。换句话说，当中间控件的位置发生变化时动画。由于其他控件已修改其可见性。

这可以在 Wpf 中实现吗？如果是，那么关于如何实现它的任何建议？

我正在使用 c#。

谢谢。

编辑：参考图像描述了我想要实现的目标：

当面板 A（红色）或面板 C（蓝色）的可见性发生变化时，尝试使面板 B（绿色）上下移动。

我已经使用和在我的 svg 图像上创建了一个自定义PreLoader屏幕。animateTransformkeyframes

当我处理图像时，它们在所有浏览器上都运行良好。但是一旦我在我的PreLoader中使用它们，它们就会突然开始工作。

正如您可以在下面的代码段中检查它们的行为一样，它在Chrome中可以完美运行，但在Firefox和IE上它们甚至完全可见。

代码片段

我已经尝试了几乎所有的东西，并为此挖掘了SO以及谷歌，但还没有找到适用于Firefox和IE的体面的解决方案。

我的意图是将对象移动到设定点（300），停在那里一会儿，然后再次移动它。我尝试像这样使用 animateTransform 来做到这一点：

但是现在对象在 20 秒后只移动了 100 像素（第一次变换被忽略了？）。我厌倦了使用动画，但这也没有按预期工作。关于我哪里出错以及我应该怎么做才能获得想要的动画效果的任何建议？

我知道带有 xlink:href 的标签可以在许多不同的位置以及不同的比例、角度、不透明度等下运行相同的动画。但是我可以更改动画的 xlinked 实例的开始时间或持续时间吗？

我想要一个 10 x 10 的正方形网格按顺序从屏幕上掉下来，一个从 0 秒开始，一个从 0.1 秒开始，一个从 0.2 秒开始，等等。如果不创建 100 个动画，我看不到如何做到这一点，所有除了开始时间都一样！在纯 SVG 中是否有一种相当有效的方法来做到这一点？还是我必须学习和介绍一些 JavaScript？谢谢！

在来自https://upload.wikimedia.org/wikipedia/commons/9/97/Moire_Lines.svg的文件中， 动画在 Chrome、Iron、Opera、Vivaldi 浏览器中旋转线条没有问题。它在 Firefox 版本中不起作用。60.0.2 或 Internet Explorer 11。据了解，SMIL 在 IE 或 Edge 中不起作用，但我希望找出它在 Firefox 中不起作用的原因。我已经减少了下面的代码行，但它们仍然在支持动画的浏览器中运行动画。是否有任何可以实现的 CSS 替代方案？

我尝试了几种方法，以下是我的尝试：

在我的打字稿文件中，我将值设置为：

在 component.html 中

第二种方法：

两种方法都不起作用。有什么办法可以做到这一点？

我一直在尝试通过单击按钮来触发我的 svg 动画的重启。我在网上找到了 beginElement() 方法，它适用于普通的 javascript/jquery，但是当我尝试在 angular 6 上使用完全相同的方法时，出现如下错误：

“'HTMLElement'类型上不存在属性'beginElement'”，知道如何解决这个问题吗？或对我通过单击 Angular 6 应用程序按钮重新启动 svg 动画的替代方法有任何建议？

我的代码： document.getElementByID("svg-id").beginElement();

这是我的 svg 的代码，我正在制作像心跳一样的动画我的图标。但当我从 1 到 0 时，它不是比例中心。这是代码：

这是codepen链接： Codepen Link

让你知道，我在 svg 路径中​​有更多设计，所以我只放了这个，因为我只在这个图标中遇到了问题。

或者

在 .ts 文件中

上面的代码在第一次加载时为 svg 设置动画，并将线从 0 度旋转到 90 度，之后任何值更改 from 和 to 值都不会更新。

谁能发现问题？