SVG, почему можно: при наведении изменить ширину обводки, но не цвет обводки?

Question

Почему в этом SVG я могу изменить ширину обводки при наведении, но не цвет обводки?

Проблема четко представлена ​​во фрагменте ниже.

Вид stroke-width:5; применяется ко всем элементам в <g id="HOVERME_LEGEND_ABC">, в то время как stroke:blue;, по-видимому, просто не применяется ни к одному.

MWE SNIPPET

#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"> поглаживалось синим цветом при наведении на группу, независимо от того, какие цвета обводки у отдельных объектов до , нависающего над группой.

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