cssを使ってsvg hoverの色を設定するには？

Question

私はdefから塗りつぶしを削除し、useにに適用されます使用し、それを

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

を行う方法を尋ね、第二の正方形が変色することを願っています。

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