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

【问题标题】：Transform origin not working with hover ScaleX SVG Path变换原点不适用于悬停 ScaleX SVG 路径
【发布时间】：2021-08-07 01:09:19
【问题描述】：

悬停时是否可以将.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>

【问题讨论】：

标签： css transform scale

【解决方案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 change d property of <path>

【讨论】：