Issue metadata
Sign in to add a comment
|
Web Animations API (WAAPI) transforms not working on nested SVGs
Reported by
davidht...@gmail.com,
Dec 19 2016
|
||||||||||||||||||||||
Issue description
UserAgent: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:50.0) Gecko/20100101 Firefox/50.0
Steps to reproduce the problem:
1. <svg>
<svg id='redRect'>
<rect width='100' height='50' fill='red' />
</svg>
</svg>
<script>
var anim = document.getElementById('redRect').animate([
{ transform: 'rotate(0deg)', opacity: 1, },
{ transform: 'rotate(-180deg)', opacity: 0, }
], {
duration: 1000,
iterations: 2,
direction: 'alternate',
});
</script>
2.
3.
What is the expected behavior?
The red rectangle should rotate as well as fade.
What went wrong?
The red rectangle does not rotate but does fade.
Did this work before? N/A
Does this work in other browsers? Yes
Chrome version: 57.0.2956.0 canary (64-bit) Channel: n/a
OS Version: 10.0
Flash Version:
This does work in Firefox but not in Chrome.
If you move the rectangle's id to either the outer SVG or the rectangle itself then the animation works.
,
Dec 19 2016
Setting redRect.style.transform also does not apply. Does not seem to be an animation issue.
,
Dec 20 2016
But if you put the 'redRect' id on the outer SVG the animation works. Just trying to understand what's happening here.
,
Dec 20 2016
That's what fs was saying, the outer <svg> element has a CSS layout box (it's position is determined by normal CSS layout). However the inner <svg> element is positioned by SVG layout. You should be able to transform both, but currently only the outer will work. Fixing that is issue 231535.
,
Dec 20 2016
Thanks for the insight. I've been trying to think of a workaround for this. I have a very detailed data visualisation with nested svg elements some of which need to be animated in sync with a data stream. The fact that the inner rect element, which I would have thought is also not included in the the CSS layout, can be animated gave me some hope but I haven't come up with a solution yet. Perhaps I should look at SMIL or CSS animation?
,
Dec 20 2016
The way of animating will not make a difference - 'transform' does not apply neither as a CSS property nor a presentation attribute. You could wrap the inner <svg> in a <g> and animate the 'transform' on that. Depending on other circumstances it may or may not be cumbersome. |
|||||||||||||||||||||||
►
Sign in to add a comment |
|||||||||||||||||||||||
Comment 1 by f...@opera.com
, Dec 19 2016