如何用CSS实现SVG箭头hover时变长变色的交互效果？

先调整SVG结构 #

首先修改你的SVG代码，移除内联的fill属性（避免和CSS样式冲突），并给SVG添加类名方便CSS定位控制：

<svg class="custom-arrow" xmlns="http://www.w3.org/2000/svg" width="28" height="8" viewBox="0 0 28 18">
  <g id="Group1" data-name="Group1" transform="translate(28.321 -0.144) rotate(90)">
    <rect id="Rectangle_1107" data-name="Rectangle 1107" width="5" height="22" transform="translate(6.144 6.321)" />
    <path id="Pol_1" data-name="Pol 1" d="M9,0l9,14H0Z" transform="translate(0.144 0.321)" />
  </g>
</svg>

用CSS实现交互效果 #

通过:hover伪类结合transform和transition属性，就能完成需求的交互：

/* 基础样式：提示元素可交互 */
.custom-arrow {
  cursor: pointer;
}

/* 默认状态：短黑色箭头 */
.custom-arrow rect,
.custom-arrow path {
  fill: #000;
  transition: all 0.3s ease; /* 添加平滑过渡动画 */
}
/* 将箭头杆缩放到短状态，transform-origin保证箭头头部位置不偏移 */
.custom-arrow rect {
  transform: scaleY(0.45);
  transform-origin: bottom center;
}

/* 悬停状态：长红色箭头 */
.custom-arrow:hover rect,
.custom-arrow:hover path {
  fill: #ff0000;
}
/* 恢复箭头杆的原始长度 */
.custom-arrow:hover rect {
  transform: scaleY(1);
}

关键说明 #

• 用transform: scaleY()调整箭头杆长度，比直接修改height更稳妥，不会打乱SVG的布局定位
• transform-origin: bottom center确保缩放时箭头头部位置固定，避免出现偏移问题
• transition属性让颜色和长度变化拥有0.3秒的平滑过渡，提升交互体验

内容的提问来源于stack exchange，提问作者emka26