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>

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

1 个答案: