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

Just saw the recent comments of the SVG Working Group on the thread. 

We launched the site that the issue arose in for us, so figured it might be useful to show the use case and what we were trying to accomplish described above in the thread.  (Also we use SVG very heavily in a pretty aggressive way throughout the site so thought the app might be interesting to the group.)

Desktop link (site works on mobile also, but easier to see the use case from here):
https://www.tango.live/match/main/701/77/20199/-/d/en 

The cheering fan character graphics (and many other elements in the site) are SVG.  The character graphic has about 20 customizable elements (face paint, jersey styles, hair style, colors, etc) and 5 different postures (excited, happy, neutral, sad, despondent).  The graphic in all 5 postures is styled uniquely for each team and for home versus away.

If you click on the vertical nav buttons to the right of the center column (F, 5', 10', 1H, 2H), you can see variations of the character animate into the UI.  If you switch between matches using the top nav, you can see more custom styling for various teams.

We used the work-around suggested and got working implementations in Chrome, Safari, Edge, Firefox, and for a time, IE.  But it's a painful approach.  

Styling the <use>'d element and going the SVG 1.1 approach would have eased development considerably.

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

Received on Thursday, 19 September 2019 08:17:23 UTC