[svgwg] Issue: SVG2 spec means elements within a <use> tag can not be targeted for styling marked as Needs WG input

svgeesus has just labeled an issue for https://github.com/w3c/svgwg as "Needs WG input":

== SVG2 spec means elements within a <use> tag can not be targeted for styling  ==
**spec:** https://www.w3.org/TR/SVG2/struct.html#UseStyleInheritance
**CodePen Demo:** https://codepen.io/peter-mouland/pen/pdEMWZ/

Recently, I have tried to create a number of SVG's and reuse those SVG's within the same document via the &lt;use> tag.  These 're-used' svgs need to have different styles applied to them, and to the elements within. 

Following the **SVG1** spec this worked as expected. You can see a CodePen Demo<sup><a href='#1'>1</a></sup> of this working with Chrome 62.  This also works when using CSS custom properties (see CodePen demo<sup><a href='#2'>2</a></sup>)

Following the **SVG2** spec no SVG's are viewable. View the same demo on Firefox 56, which has implemented the SVG2 spec (See discussion<sup><a href='#3'>3</a></sup>).  This is also no longer achievable using CSS Custom Props (see CodePen demo<sup><a href='#2'>2</a></sup>).

Using the demo as an example for the SVG2 spec, is there another way I am able to achieve this in browsers implementing SVG2? Or is this an area that requires some more thought?



### Links:
 - <a name="1">1</a> [CodePen Demo using multiple symbols](https://codepen.io/peter-mouland/pen/pdEMWZ/)
 - <a name="2">2</a>[CodePen Demo using CSS custom properties](https://codepen.io/peter-mouland/pen/MOpeJw?editors=1100)
 - <a name="3">3</a> [Bugzilla Firefox discussion](https://bugzilla.mozilla.org/show_bug.cgi?id=1415186): _Firefox does not display colours: as per SVG2 spec_
 - 4 [Chromium bug raised](https://bugs.chromium.org/p/chromium/issues/detail?id=785234#c2): _chrome display colours: as per v1 spec_
 - 5 [Chromium SVG2 bug Raised](https://bugs.chromium.org/p/chromium/issues/detail?id=785246&can=2&start=0&num=100&q=&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified&groupby=&sort=)
 - 6 [Edge Bug Report](https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/14673751/): _Edge displays colours: as per v1 spec_


### additional info email to w3c: 21 Nov 2017
 > I think this would classify as a breaking change between the 2 specs (according to feedback gathered from a number browser venders). I'm not sure if it was intended, or an unfortunate side-effect, either way, I just want to style my inline-svg's with as little duplicate code as possible 🤔
> 
> I hope you are able to follow my ramblings and either update the spec to allow re-used SVG's to have custom styling applied, or perhaps document another solution to this problem.  Thanks for any help!


See https://github.com/w3c/svgwg/issues/367

Received on Tuesday, 21 November 2017 17:46:30 UTC