1

I have an SVG image inside my GWT application. For this I'm using lib-gwt-svg.

I can target elements by ids, add styles to them, no problem with that.

But I tried to animate using "skewX" and that is, what went wrong.

I have a barrier, that I want to open using that skewX property. I add the style, it animates to open. It also closes without problem. But when I change the presenter, and then return back to the SVG image, the barrier moves to different position. It can be fixed by closing and opening it again.

I tried using matrix, with the same result. I also found out, that it is caused by SVG elements using different coordinates for positioning. So when I apply CSS style (skewX), it uses CSS style for the SVG and it works correctly. But when I leave the presenter and return, those CSS styles are now handled like SVG styles, thus making the barrier display wrong. When I open or close the barrier, CSS styles are re-aplied and it is all ok again.

I tried some hacks, like re-apply styles when returning to SVG, but it makes no difference, as I'm adding the same style to the the SVG so it doesn't care. It only refreshes when I add diferent transformation, from the one already present.

I tried to work around this by using the "transform" attribute of SVG with calcutaion of the coordinates necessary for translate after skew. How to do that I found here: How to set transform origin in SVG

It works nicely, but there is no animation whe using this approach.

Any idea how to force SVG to refresh its styles? Only sollution I can think of is change its style from skewX(0.1) to skewX(0.11), which is different, so it refreshes, but when to apply it is also the question. Even when I apply it in Scheduler.get().scheduleDeffered, it doesn't work. If I apply it on button click, it works.

Community
  • 1
  • 1
ezpzlmnsqz1337
  • 394
  • 1
  • 5
  • 16
  • I solved it by using scheduleFixedDelay for remove and then again for adding the right class. This refreshes the style of the SVG and starts handling the coordinates like CSS again. It's more of a hack, than a right sollution and it will probably need diferent delays on different devices. But for now it's enough for me.... – ezpzlmnsqz1337 May 24 '16 at 07:53
  • If you have CSS transitions there for animating props, you could use onTransitionEnd event to trigger your cleanup code – Роман Гуйван Jun 03 '16 at 06:52

0 Answers0