How do I properly target SVG symbol paths on hover? - css

Question

I can't seem to properly target a symbol's path stroke when hovering.
There's a similar entry but it doesn't seem to target hovering. ( Controlling SVG colors with CSS )
In trying just to change the stroke on the use tag it just 'adds' a stroke where there wasn't one before
.terminal:hover {cursor:pointer;stroke:#000;}
When trying to target the path's themselves, it doesn't work at all
.terminal:hover path {stroke:#000;}
Does the Symbol change things for CSS targeting?
https://codepen.io/trevcis/pen/OYMLqO

Answer 1

Replace .terminal:hover path {stroke:#000;} with .terminal:hover use {stroke:#000;} as the actual node inside of .terminal is use, not path. It works on Chrome, FF, and Safari. Not sure about IE.
Updated answer:
If you want to use one same symbol but want to change each one's stroke color based on hover, you can try with CSS variables. Try below:
.terminal {
--color-st0: #f00; /* #54565A */
--color-st1: #0f0; /* #E2ECF5 */
}
.terminal:hover {
cursor:pointer;
}
.terminal:hover use {
--color-st0: #333333;
--color-st1: #333333;
}
.st0TERMINAL{
fill:none;
stroke: var(--color-st0);
stroke-width:6;
stroke-miterlimit:10;
}
.st1TERMINAL{
fill:none;
stroke: var(--color-st1);
stroke-width:2;
stroke-miterlimit:10;
}
.st2TERMINAL{
fill:#789904;
}
<svg id="assets" xmlns="http://www.w3.org/2000/svg" viewBox="-6 -6 200 200">
<symbol id="terminal" viewBox="0 0 16.8 16.8">
<path class="st0TERMINAL" d="M-0.8,2.6c0,0-1.8,0-1.8-1.8v-1.6c0,0,0-1.8,1.8-1.8h1.6c0,0,1.8,0,1.8,1.8v1.6c0,0,0,1.8-1.8,1.8H-0.8z"/>
<path class="st1TERMINAL" d="M-0.8,2.6c0,0-1.8,0-1.8-1.8v-1.6c0,0,0-1.8,1.8-1.8h1.6c0,0,1.8,0,1.8,1.8v1.6c0,0,0,1.8-1.8,1.8H-0.8z"/>
<path class="st2TERMINAL" d="M-0.8,2.6c0,0-1.8,0-1.8-1.8v-1.6c0,0,0-1.8,1.8-1.8h1.6c0,0,1.8,0,1.8,1.8v1.6c0,0,0,1.8-1.8,1.8H-0.8z"/>
</symbol>
<g id="terminal1" class="terminal">
<use xlink:href="#terminal" width="12" height="12" x="0" y="0" style="overflow:visible;"/>
</g>
<g id="terminal2" class="terminal">
<use xlink:href="#terminal" width="12" height="12" x="5" y="5" style="overflow:visible;"/>
</g>
</svg>