Как мне переместить несколько SVG-ректов при наведении?

Question

По сути, я пытаюсь выполнить все три части перехода флага, как только пользователь наводит курсор мыши сразу, а не по отдельности, что мне удалось сделать до сих пор.я пытался использовать «g» в качестве селектора, но он не работалпри запуске кода, и вы сможете получить то, что я пытаюсь сказать

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>