CODEWITHSUNDEEP
csssvg
user2979402
user2979402

Reputation: 37

How do I properly target SVG symbol paths on hover?

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

Upvotes: 1

Views: 466

Answers (1)

cypark
cypark

Reputation: 955

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>

Upvotes: 1

Related Questions