如何在 svg 圆圈内制作波浪线动画 [英] how to make wavy line animation inside svg circle

问题描述

我有一个 loader gif，但我想要这个动画使用 svg[1]:https://i.stack.imgur.com/h3oJC.gif

I have a loader gif, but I want this animation using svg [1]: https://i.stack.imgur.com/h3oJC.gif

推荐答案

享受:

<svg>
  <rect fill="blue" x="0" y="0" width="300" height="140"/>
  <circle fill="white" cx="150" cy="70" r="60" stroke="blue" stroke-width="5" />
  <path fill="none" stroke="blue" stroke-width="10" d="M0,0 Q 30,-30 60,0 Q 90,30 120,0 Q 150,-30 180,0 210,30 240,0">
  <animateTransform attributeName="transform"
                          attributeType="XML"
                          type="translate"
                          from="-30 70"
                          to="90 70"
                          dur="1s"
                          repeatCount="indefinite"/>
  </path>
</svg>

这篇关于如何在 svg 圆圈内制作波浪线动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！