【问题标题】：SVG, why can :hover change the stroke-width but not the stroke-color?SVG，为什么 :hover 可以改变笔画宽度但不能改变笔画颜色？
【发布时间】：2018-12-03 01:42:22
【问题描述】：

为什么在这个 SVG 中，我可以更改悬停时的笔触宽度，但不能更改笔触颜色？

问题在下面的sn-p中很清楚地呈现出来。

stroke-width:5; 应用于<g id="HOVERME_LEGEND_ABC"> 中的所有元素，而stroke:blue; 似乎只是未应用于任何元素。

MWE 片段

#LEGEND_ABC{
  cursor:pointer;
}
#LEFTTICKBOX_ABC{
  stroke:black;
}
#COLOUREDBOX_ABC{
  fill:yellow;
  stroke:black;
}
#HOVERME_LEGEND_ABC:hover{
  fill:#0000EE;
  stroke-width:5;
  stroke:blue;
}

<svg id="SVG"
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  width="500"
  height="70"
  viewBox="-15 -45 500 70">

<g id="LEGEND_ABC">
<g id="HOVERME_LEGEND_ABC">
<rect id="LEFTTICKBOX_ABC"
  x="0"
  y="0"
  width="15"
  height="15">
</rect>
<use id="COLOUREDBOX_ABC"
  x="30"
  y="-5"
  xlink:href="#LEGENDBOX">
</use>
<text id="TEXT_ABC"
  x="65"
  y="12.5">
Color me (why are the rectangles not being stroked blue?)
</text>
</g>
</g>
<defs id="DEFINITIONS">
<rect id="RECTANGLE_YELLOW"
  width="42.5"
  height="95">
</rect>
<rect id="LEGENDBOX"
  x="0"
  y="0"
  width="25"
  height="25">
</rect>
</defs>
</svg>

我想要的是，<g id="HOVERME_LEGEND_ABC"> 的全部内容在悬停在组上时被蓝色描边，无论单个对象在悬停在组上之前有什么笔触颜色。 p>

【问题讨论】：

@GerardoFurtado 那么我将如何实现预期的结果？

标签： css svg

【解决方案1】：

更具体...#HOVERME_LEGEND_ABC:hover #COLOUREDBOX_ABC

#LEGEND_ABC{
  cursor:pointer;
}
#LEFTTICKBOX_ABC{
  stroke:black;
}
#COLOUREDBOX_ABC{
  fill:yellow;
  stroke:black;
}
#HOVERME_LEGEND_ABC:hover{
  fill:#0000EE;
  stroke-width:5;
  stroke:blue;
}
#HOVERME_LEGEND_ABC:hover #COLOUREDBOX_ABC{
  fill:#0000EE;
  stroke-width:5;
  stroke:blue;
}
#HOVERME_LEGEND_ABC:hover #LEFTTICKBOX_ABC{
  fill:#0000EE;
  stroke-width:5;
  stroke:blue;
}

<svg id="SVG"
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  width="500"
  height="70"
  viewBox="-15 -45 500 70">

<g id="LEGEND_ABC">
<g id="HOVERME_LEGEND_ABC">
<rect id="LEFTTICKBOX_ABC"
  x="0"
  y="0"
  width="15"
  height="15">
</rect>
<use id="COLOUREDBOX_ABC"
  x="30"
  y="-5"
  xlink:href="#LEGENDBOX">
</use>
<text id="TEXT_ABC"
  x="65"
  y="12.5">
Color me (why are the rectangles not being stroked blue?)
</text>
</g>
</g>
<defs id="DEFINITIONS">
<rect id="RECTANGLE_YELLOW"
  width="42.5"
  height="95">
</rect>
<rect id="LEGENDBOX"
  x="0"
  y="0"
  width="25"
  height="25">
</rect>
</defs>
</svg>

【讨论】：