SVG在GWT中使用CSS3动画

时间:2016-05-18 07:24:10

标签: css css3 gwt svg

我的GWT应用程序中有一个SVG图像。为此,我使用了lib-gwt-svg。

我可以通过ID定位元素,为它们添加样式,没问题。

但我尝试使用" skewX"那就是出了什么问题。

我有一个障碍,我想使用该skewX属性打开。我添加了样式,它打开动画。它也没有问题关闭。但是当我更改演示者,然后返回到SVG图像时,屏障会移动到不同的位置。它可以通过再次关闭和打开来修复。

我尝试使用矩阵,结果相同。我还发现,它是由SVG元素使用不同的坐标进行定位引起的。因此,当我应用CSS样式(skewX)时,它使用CSS样式作为SVG并且它可以正常工作。但是当我离开演示者并返回时,这些CSS样式现在像SVG样式一样处理,从而使屏障显示错误。当我打开或关闭屏障时,CSS样式会被重新应用,而且一切都好了。

我尝试了一些黑客,比如在返回SVG时重新应用样式,但没有区别,因为我在SVG中添加了相同的样式,因此它并不关心。它只会在我添加不同的转换时刷新,而不是已经存在的转换。

我尝试使用"转换"来解决这个问题。 SVG的属性与斜率后平移所需坐标的加速度。如何做到这一点我在这里找到:How to set transform origin in SVG

它工作得很好,但没有使用这种方法的动画。

知道如何强制SVG刷新其样式吗?只有我能想到的溶剂是将它的样式从skewX(0.1)更改为skewX(0.11),这是不同的,所以它会刷新,但是何时应用它也是问题。即使我在Scheduler.get()。scheduleDeffered中应用它,它也不起作用。如果我在点击按钮时应用它,它就可以工作。

0 个答案:

没有答案