SVG animation timing attributes are not being unescaped per SMIL spec
Reported by
paul.leb...@gmail.com,
Dec 17 2016
|
||||||
Issue descriptionUserAgent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.99 Safari/537.36 Example URL: https://jsfiddle.net/41orvxnf/ Steps to reproduce the problem: 1. Try the linked jfiddle test case (reproduced below) 2. Click on red circle. What is the expected behavior? Green circle should start animating after one second. What went wrong? Green circle does not animate. Does it occur on multiple sites: Yes Is it a problem with a plugin? No Did this work before? N/A Does this work in other browsers? Yes Chrome version: 54.0.2840.99 Channel: n/a OS Version: 6.1 (Windows 7, Windows Server 2008 R2) Flash Version: Shockwave Flash 24.0 r0 The cause is that the red circle has an id with a hyphen ("has-dash"). The green circle has a begin attribute of "has\-dash.click + 1s". According to the SMIL spec[1], timing attribute values can be escaped with a backslash character. But in Chrome neither the unescaped form, nor the escaped form work. The test case works in Firefox. [1] https://www.w3.org/TR/2001/REC-smil-animation-20010904/#TimingAttrValGrammars <svg> <circle cx="75" cy="75" r="25" fill="red" id="has-dash"> <animate attributeName="r" attributeType="XML" dur="2s" repeatCount="indefinite" values="25 ; 50 ; 25; 25" keyTimes="0 ; 0.1 ; 0.2; 1"/> </circle> <circle cx="225" cy="75" r="25" fill="green"> <animate attributeName="r" attributeType="XML" begin="has\-dash.click + 1s" dur="2s" repeatCount="indefinite" values="25 ; 50 ; 25; 25" keyTimes="0 ; 0.1 ; 0.2; 1"/> </circle> </svg>
,
Dec 19 2016
,
Dec 19 2016
Able to reproduce the issue on the latest stable(55.0.2883.87/95) on Windows-10, Linux Ubuntu 14.04 and Mac OS 10.12.2. This non regression issue behaving the same on older chrome version(45.0.2454.101). On chrome versions before this(30.0.1549.0 & 40.0.2172.0) circles do not animate. Triaging for more inputs on this.
,
Dec 19 2016
,
Feb 16 2018
This issue has been Available for over a year. If it's no longer important or seems unlikely to be fixed, please consider closing it out. If it is important, please re-triage the issue. Sorry for the inconvenience if the bug really should have been left as Available. If you change it back, also remove the "Hotlist-Recharge-Cold" label. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Feb 16 2018
The version without the '\' works now. We are not likely to ever fix this, so closing it. If for some reason it is pressing (i.e. you have a strong reason for needing the escaped form) then update the bug.
<svg>
<circle cx="75" cy="75" r="25" fill="red" id="has-dash">
<animate attributeName="r" attributeType="XML"
dur="2s" repeatCount="indefinite"
values="25 ; 50 ; 25; 25" keyTimes="0 ; 0.1 ; 0.2; 1"/>
</circle>
<circle cx="225" cy="75" r="25" fill="green">
<animate attributeName="r" attributeType="XML"
begin="has-dash.click + 1s"
dur="2s" repeatCount="indefinite"
values="25 ; 50 ; 25; 25" keyTimes="0 ; 0.1 ; 0.2; 1"/>
</circle>
</svg>
,
Feb 17 2018
It is unfortunate that this has been closed. It's interesting that Chrome now supports the hyphen. Even though that (possibly) contravenes the spec, it doesn't really help much. Firefox doesn't support the un-escaped version. So there is still no cross-compatible way to animate an element with a hyphenated id. |
||||||
►
Sign in to add a comment |
||||||
Comment 1 by tkent@chromium.org
, Dec 18 2016