html 笔记：CSS与SVG实现元素沿环形路径动画 - 1

Posted 2021-05-11

<!-- SVG 配合 SMIL 实现元素沿环形路径动画 -->
<div class="contain">
  <svg width="250" height="250" viewbox="0 0 250 250">
    
    <!-- 运动的路径：path -->
    <path id="motion-path" 
          d="M25,125a100,100 0 1,0 200,0a100,100 0 1,0 -200,0"
          fill="none" stroke="blue" stroke-width="2"></path>
    
    <!-- 运动的物体：mover -->
    <circle r="15" fill="hotpink">
      <animateMotion dur="5s" repeatCount="indefinite">
        <mpath xlink:href="#motion-path" />
      </animateMotion>
    </circle>
    
  </svg>
</div>