如何实现SVG path d菱形hover时延伸至线端的交互动画

直接拆分路径+CSS缩放动画即可实现需求，不需要复杂的路径偏移计算，兼容性和流畅度都更好。

完整实现代码 #

<!-- 可直接复制使用 -->
<svg width="119" height="30" viewBox="0 0 119 30" fill="none" xmlns="http://www.w3.org/2000/svg" class="interactive-diamond">
  <!-- 常驻显示的左侧菱形部分 -->
  <path d="M10.7735 23L6 29.7735L0.226501 24L6 18.2265L10.7735 23Z" fill="black"/>
  <!-- 做延伸动画的线条主体部分 -->
  <path class="line-body" d="M10.7735 23H117V0H119V25H10.7735V23Z" fill="black"/>
</svg>

.interactive-diamond {
  cursor: pointer;
}
.interactive-diamond .line-body {
  /* 把变形原点固定在菱形与线条的衔接位置，保证动画从菱形处开始延伸 */
  transform-origin: 10.77px 15px;
  /* 初始状态线条横向缩放为0，完全隐藏 */
  transform: scaleX(0);
  /* 配置动画过渡参数，可自行调整时长和缓动效果 */
  transition: transform 0.28s ease-out;
}
/* hover时线条延展到完整长度 */
.interactive-diamond:hover .line-body {
  transform: scaleX(1);
}

实现原理说明 #

• 把原本单条path绘制的完整图形拆成两个独立部分：左侧菱形始终显示，右侧线条部分单独控制显隐动画，避免了计算整条path长度、调整dashoffset的繁琐操作。
• 动画通过CSS transform: scaleX()实现，把缩放原点钉在菱形和线条的衔接点上，缩放时线条只会从衔接点向右延展，不会出现从中间向外扩散的错位效果。
• hover状态下动画执行完成后会自动保持完整形态，鼠标移出后会按相同的过渡动画收回，回到初始只显示菱形的状态，完全匹配需求。
• 如果需要调整动画速度，直接修改transition属性里的时长数值即可；要更顺滑的动效可以把缓动函数换成cubic-bezier(0.22, 1, 0.36, 1)。

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