如何使用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。

＆＃13;

＆＃13;

.hidden {
  display: none;
}

.box {
  width: 100px;
  height: 100px;
  margin: 1em;  
}

.green {
  fill:green;
}

.green:hover {
  fill:lightgreen;
}

.blue {
  fill:blue
}

.blue:hover {
  fill:lightblue;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;