Re: [svgwg] SVG2 spec means elements within a <use> tag can not be targeted for styling

You're correct that this is technically a breaking change in the spec. However, it was a section of the spec that was never consistently implemented in web browsers.  The [note and example in the spec](https://www.w3.org/TR/SVG2/struct.html#UseStyleInheritance) explains what changed and why (to be consistent with web components shadow DOM, and to avoid many current bugs with interactive and animated styles).

The workaround is to avoid CSS selectors that depend on the position of the original element within the original DOM (like `svg.class  path.inside-symbol`).  The paths in the cloned copies of the symbols will not match these selectors, because they are no longer descendants of the `svg.class`.

If you want the styles to persist in the clones, you can put the classes on the `symbol` or `path` elements directly, since those classes would be copied to the clone.  Here's a version of your pen that does that, and therefore works in Firefox:

https://codepen.io/AmeliaBR/pen/4ccc55d55673d8467850bd9ce55be6f1?editors=1100

I also fixed the Safari problem, which wasn't related to style matching.  Safari does not yet support the `href` attribute without the `xlink` prefix.

________________________________

All that said: if other browser developers / spec editors want to propose a different spec that is closer to how SVG 1.1 (and most current browsers) work, that's still an option.  But then we'd need to clarify how things like animations and interactive pseudoclasses work (which is currently a mess of inconsistency cross-browser).

-- 
GitHub Notification of comment by AmeliaBR
Please view or discuss this issue at https://github.com/w3c/svgwg/issues/367#issuecomment-346112326 using your GitHub account

Received on Tuesday, 21 November 2017 18:07:36 UTC