Transform origin not working with hover ScaleX SVG Path

Question

Is it possible to have the left end of .line at the same place when hover? I thought transform-origin would do the trick.

.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>

score 0 · Answer 1 · answered Aug 07 '21 at 01:15

Found another solution:

animate the d property instead:

.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>

Thanks to CSS change d property of <path>

Transform origin not working with hover ScaleX SVG Path

1 Answers1