[webkit-help] SVG & CSS Transitions

[Darren Lee]

Thanks that definitely helped.

I think my issue was more to do with not being able to use CSS transitions on sub svg elements (like a <g node). I worked around this by using foreignObjects in the SVG document.

Thanks,
Darren


From: digital wave / Reiner Pittinger [mailto:rp at digital-wave.de]
Sent: 30 November 2010 09:48
To: Darren Lee
Cc: webkit-help at lists.webkit.org
Subject: Re: [webkit-help] SVG & CSS Transitions

Hi Darren,

Am 30.11.2010 um 17:43 schrieb Darren Lee:


Hey all,
I am working on an SVG app but I have a problem. SVG animations are really slow on devices, CSS transitions on the other hand seem to work really well. On devices like the iPad I think CSS transitions are hardware accelerated.
CSS transitions are indeed hardware-accelerated on iOS, so you should stick to them whenever possible.
I tried to use CSS transitions on SVG elements but it did not seem to work. I tried svgElem.style.webkitTransition = ... and svgElem.setAttribute("style", "-webkit-transition...");
Is it possible to use CSS animations on SVG elements? If not are there any good techniques to improve the performance/framerate of SVG animations for devices?
Unfortunately the transitions/keyframe animations indeed may only work on bitmaps, which probably is because UIWebView internally uses UIImageView to render them.

In addition, -webkit-animaton definitions need to be present when the document loads - they cannot be added at runtime.

You could try to put the CSS into the SVG file (instead onto the HTML document that includes the SVG) and see if that works.

Good luck,


Reiner

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-help/attachments/20101201/f78cca9a/attachment.html>