Как правильно нацелить пути символов SVG при наведении курсора?

Question

Мне кажется, что при наведении курсора я не могу правильно нацелить ход траектории символа.

Есть похожая запись, но она не предназначена для зависания. ( Управление цветами SVG с помощью CSS )

Пытаясь просто изменить штрих на теге использования, он просто «добавляет» штрих, где его раньше не было

 .terminal:hover {cursor:pointer;stroke:#000;}

При попытке нацелить путь самостоятельно, он не работает вообще

 .terminal:hover path {stroke:#000;}

Изменяет ли Символ что-то для таргетинга CSS?

https://codepen.io/trevcis/pen/OYMLqO

Answer 1

Замените .terminal:hover path {stroke:#000;} на .terminal:hover use {stroke:#000;}, поскольку фактический узел внутри .terminal равен use, а не path.Работает на Chrome, FF и Safari.Не уверен насчет IE.

---

Обновленный ответ:

Если вы хотите использовать один и тот же символ, но хотите изменить цвет обводки каждого из них в зависимости от наведения, вы можете попробовать CSS-переменные .Попробуйте ниже:

.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>