css - 如何在悬停时正确定位 SVG 符号路径？

Question

我似乎无法在悬停时正确定位符号的路径笔划。

有一个类似的条目，但它似乎并不针对悬停。 (Controlling SVG colors with CSS)

在尝试更改 use 标签上的笔画时，它只是在之前没有笔画的地方“添加”了一个笔画

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

当试图定位路径本身时，它根本不起作用

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

Symbol 会改变 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>