movii
8/18/2017 - 2:27 AM

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

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

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