Why isn't CSS rules applied on embedded SVG symbols? - css

Question

Here is a simple version of CSS rules with hover and it is working fine:
https://codepen.io/hbi99/pen/oNvaEZK
...however if I try to use the SVG as symbol and reference it with USE-tag; the CSS rules for :hover is ignored. See this example:
https://codepen.io/hbi99/pen/pozxaea
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
<symbol id="box" viewBox="0 0 200 200">
<style>
.test {
fill: #f00;
opacity: 0.35;
}
.test:hover {
fill: #fff;
opacity: 1;
}
</style>
<rect class="test" x="10" y="10" width="150" height="150"/>
</symbol>
</svg>
<svg><use href="#box"></use>
Any idea why the second example isn't working as intended?
I am testing this on Chrome (v76)

Answer 1

The example you linked that should not work, also works. But the code snippet you included in the question does not work since you use a class selector but don't use the class in the SVG image.
Add class="utc-bar" to the <rect> element and it works fine.
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
<symbol id="box" viewBox="0 0 200 200">
<style>
.utc-bar {
fill: #f00;
opacity: 0.35;
}
.utc-bar:hover {
fill: #fff;
opacity: 1;
}
</style>
<rect class="utc-bar" x="10" y="10" width="150" height="150"/>
</symbol>
</svg>
<svg><use href="#box"></use>