Question

基本上我试图使标志的三个部分全部过渡，一旦用户没有一次将鼠标悬停一次，这就是我到目前为止所能完成的。我尝试使用'g'作为选择器，但没有成功

<style type="text/css">

.st0{fill:#ED9E4F;}
.st1{fill:#F1F7E7;}
.st2{fill:#83C553;}

.aller .all:hover {
transition: 2s;
height: 25%;
}

</style>


<g> 
<rect id="XMLID_12_" x="153.6" class="st0 all" width="7.2" 
height="12.5"/>
<rect id="XMLID_13_" x="146.4" class="st1 all" width="7.2" 
height="12.5"/>
<rect id="XMLID_10_" x="139.2" class="st2 all" width="7.2" 
height="12.5"/>

</g>

</svg>

所有这三个部分（矩形）都可以同时向下分割，无论用户将代码悬停在哪个部分上，您都可以得到我想说的话

Answer 1

我将标记分组，然后将鼠标悬停在刻度上。我希望这就是你的要求。

.st0 {
  fill: #ed9e4f;
}
.st1 {
  fill: #f1f7e7;
}
.st2 {
  fill: #83c553;
}

#flag {
  transform: scaleY(1);
  transition: transform 2s;
}
#flag:hover {
  transform: scaleY(0.25);
}

<svg viewBox="135 0 30 30">
<g id="flag"> 
<rect id="XMLID_12_" x="153.6" class="st0 all" width="7.2" 
height="12.5"/>
<rect id="XMLID_13_" x="146.4" class="st1 all" width="7.2" 
height="12.5"/>
<rect id="XMLID_10_" x="139.2" class="st2 all" width="7.2" 
height="12.5"/>
</g>

</svg>

如何在悬停时移动多个svg矩形？

1 个答案: