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

I believe with CSS Custom Properties you can achieve what you need, but this obviously means it won't work in Internet Explorer or Edge < 16.  Hopefully supporting 'modern' browsers is enough for you, but i guess it doesn't change the fact about the breaking change, and each element can be styled/themed according to each 'state'  as required.


My second link tried to demonstrate this technique: https://codepen.io/peter-mouland/pen/MOpeJw
This has a single SVG, which is then used multiple times:

```svg
<svg class="symbol">
  <symbol id="chevron" viewBox="0 0 100 60" >
    <line class='line line--1' x1="50" y1="50" x2="10" y2="10" stroke-width="10" stroke-linecap="round"></line>
    <line class='line line--2' x1="50" y1="50" x2="90" y2="10" stroke-width="10" stroke-linecap="round"></line>
  </symbol>
</svg>
<svg class="a-state" width="4em" height="40px"><use xlink:href="#chevron"></use></svg>
<svg class='another-state' width="4em" height="40px"><use xlink:href="#chevron"></use></svg>
```

```css
.symbol { display: none; }

/* Set default theme  */
:root { 
  --line-1: brown;
  --line-2: green;
}
/* Set another theme */
.another-state {
  --line-1: red;
  --line-2: blue;  
}

/* Apply Themes */
.line {
    stroke: var(--line-1);
}
.line--2 {
    stroke: var(--line-2);
}
```

which produces: 
<img width="174" alt="screen shot 2017-12-09 at 20 31 46" src="https://user-images.githubusercontent.com/1727939/33799259-0582b4f0-dd20-11e7-9353-a8894942d7f6.png">

I think this is what you are trying to get, but i could have misunderstood.  Plus i'm not sure if browser support is important to you or if you trying to raise general awareness about the breaking change in the spec... either way hope this helps! 

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

Received on Saturday, 9 December 2017 20:40:00 UTC