如何在悬停时移动多个 svg rect？答案

【问题标题】：How do i move multiple svg rects on hover?如何在悬停时移动多个 svg rect？
【发布时间】：2019-09-16 18:20:59
【问题描述】：

基本上一旦用户一次悬停而不是单独悬停，我试图使标志转换的所有三个部分成为我迄今为止所做的事情。我尝试使用'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>

无论用户将鼠标悬停在哪一个上，所有三个部分（矩形）都会同时向下切片运行代码，您将能够得到我想说的内容

【问题讨论】：

请澄清您的具体问题或添加其他详细信息以准确突出您的需要。正如目前所写的那样，很难准确地说出你在问什么。
阅读最后一部分应该清楚事情

标签： css animation svg transition

【解决方案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>

【讨论】：