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

Question

Basically i trying to make all the three part of the flag transition once the user hover at once not individually which what I've managed to do so far. i tried using 'g' as selector but it didn't work

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

All the three part (rects) to slice downward at the same time no matter which one the user hover on run the code and you'll be able to get what im trying to say

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>