CSSでSVGアニメーション

Question

<svg xmlns="http://www.w3.org/2000/svg" width="57.45" height="9.899" viewBox="0 0 57.45 9.899"><defs><style>.a{fill:#fff;}</style></defs><path class="a" d="M1975.793,3221.193l3.743-3.743H1924v-1h55.535l-3.743-3.743.707-.707,4.95,4.949-.707.708-4.243,4.500Z" transform="translate(-1924 -3212)"></path></svg>

上記のSVGが→のSVGなのですが、SVGの大きさを変えずに→の直線部分だけを短くしたいです。
※実際の動作としては、要素がホバーされた際にこのSVGの直線部分を短く

当方、SVGアニメーションの実装経験がなく。
色々、調べてみたのですが参考になるサイトが見つからず質問させていただいた次第です。

宜しくお願い致します。

Answer 1

こんばんは。

ご条件に合うかわかりませんが、clip-pathを使うのはいかがでしょうか。

サンプル

svg{
  clip-path: circle(20px at right);
  animation: test 1s;
}

@keyframes test{
  from{
    clip-path: circle(58px at right);
  }
  to{
    clip-path: circle(20px at right);
  }
}

Comments

[Ryu__ta]

お返事遅くなり申し訳ございません。
ご提示いただいた方法を基に、希望の動作にできました！
ありがとうございます。