css - 变换原点不适用于悬停 ScaleX SVG 路径

Question

悬停时是否可以将左端.line放在同一位置？我想transform-origin会做的伎俩。

.line{
transition: .3s;
transform-origin: left;
}

body:hover .line{transform:scaleX(2);}

<div>

<svg clip-rule="evenodd" fill-rule="evenodd" viewBox="0 0 62 52" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

      <path class="line" d="m15.665 25.123h20v1h-20z" />
  </svg>

</div>

标签： csstransformscale

Answer 1

找到另一个解决方案：

d改为动画属性：

.line{
transition: .3s;
transform-origin: left;
}

body:hover .line{  d: path('m15.665 25.123h40v1h-40z')}

<div>

<svg clip-rule="evenodd" fill-rule="evenodd" viewBox="0 0 62 52" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

      <path class="line" d="m15.665 25.123h20v1h-20z" />
  </svg>

</div>

感谢CSS 改变 <path> 的 d 属性