如何使用 css 设置 svg 悬停颜色

Question

我希望第二个方块变色，问怎么做

rect{
  width: 100px;
  height: 100px;
  fill: #ff0;
 }
rect:hover{
  fill: #f0f;
}
use:hover{
  fill: #f0f;
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="140" height="300">
 <defs>
     <rect id="rect"/>
 </defs>
<rect/>
<use xlink:href="#rect" y="120"/>
</svg>

Answer 1

从def中删除填充并使用应用于use。

.hidden {
  display: none;
}
.box {
  width: 100px;
  height: 100px;
  margin: 1em;  
}
.green {
  fill:green;
}
.green:hover {
  fill:lightgreen;
}
.blue {
  fill:blue
}
.blue:hover {
  fill:lightblue;
}

<svg viewbox="0 0 100 100" class="hidden">
  <defs>
    <rect id="rect" width="100" height="100" />
  </defs>
</svg>
<svg>
  <use xlink:href="#rect" class="box green" />
</svg>
<svg>
  <use xlink:href="#rect" class="box blue" />
</svg>