弧度

弧度动画

A 命令是SVG路径中的弧线命令

A rx ry x-axis-rotation large-arc-flag sweep-flag x y
  • rx：椭圆的水平半径（弧线的宽度）。
  • ry：椭圆的垂直半径（弧线的高度）。
  • x-axis-rotation：椭圆的旋转角度，指定椭圆的主轴与水平轴的夹角。一般情况下，0 表示不旋转椭圆。
  • large-arc-flag：是否绘制大弧（0 或 1）。
    • 0：绘制小于 180° 的弧。
    • 1：绘制大于 180° 的弧。
  • sweep-flag：指定弧线的方向（0 或 1）。
    • 0：顺时针方向。
    • 1：逆时针方向。
  • x：弧线的终点 x 坐标。
  • y：弧线的终点 y 坐标。
<!-- 第一个弧度 (0° 到 -120°) -->
<path class="arc" d="M 285 0 A 285 165 0 0 0 0 165">
    <animate
        attributeName="stroke-dashoffset"
        values="0;-1000"
        dur="12s"
        repeatCount="indefinite"
    />
</path>

show code

处理遮挡问题

椭圆中心点往下移动 5px

<!-- 椭圆背景灰色 -->
<ellipse
    cx="290"  // 中心点往下5px
    cy="170" // 中心点往下5px
    rx="285"  
    ry="165" 
    fill="transparent"
    stroke-width="6"
    stroke="#f00"
/>

<!-- 第一个弧度 (0° 到 -120°) -->
<path class="arc"d="M 290 5 A 285 165 0 0 0 5 170"  > // 这个也要往下 295->290 175->170
    <animate
        attributeName="stroke-dashoffset"
        values="0;-1000"
        dur="12s"
        repeatCount="indefinite"
    />
</path>

show code