动画 SVG 路径 d=... 没有笔划的坐标答案

【问题标题】：Animate SVG path d=... coordinates without stroke动画 SVG 路径 d=... 没有笔划的坐标
【发布时间】：2020-01-28 14:03:35
【问题描述】：

我正在尝试在 SVG 中制作以下 GIF 动画。

代码：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" width="100" height="100">
    <path d="M18.53.359h.225A16.684 16.684 0 0130.56 5.12a16.902 16.902 0 014.813 12.007A18.372 18.372 0 0130.18 29.66l-.671.672a18.215 18.215 0 01-11.99 5.163l-.436.012h-.13A16.757 16.757 0 015.12 30.662a16.845 16.845 0 01-4.74-12.08A18.35 18.35 0 015.513 6.114l.307-.311A18.203 18.203 0 0118.095.371l.435-.012zM16.413 2.6c-3.508 0-6.778 1.443-9.558 4.253-3.306 3.299-4.719 7.273-4.102 11.522.495 3.425 2.323 6.938 5.012 9.63l.31.303c4.452 4.235 13.288 7.796 20.265 1.086l.248-.244.236-.248.354-.344a12.592 12.592 0 003.686-11.167 17.578 17.578 0 00-4.95-9.618c-2.689-2.699-6.17-4.532-9.597-5.032-.63-.093-1.267-.14-1.904-.141z">
        <animate
            attributeName="d"
            from="start_path"
            to="end_path"
            dur="0.66s"
            fill="freeze"
            repeatCount="indefinite"
        />
    </path>
</svg>

我的解决方案是使用clip-path，但如果可能的话，我只想尝试使用路径坐标。

【问题讨论】：

标签： animation svg

【解决方案1】：

也许最简单的解决方案是使用圆形作为蒙版。然后为圆的虚线数组设置动画。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" width="100" height="100">
    <defs>
        <mask id="wipe">
            <circle cx="18" cy="18" r="16"
                    fill="none" stroke="white" stroke-width="5" stroke-dasharray="100.6" stroke-dashoffset="100.6"
                    transform="rotate(-35,18,18)">
              <animate attributeName="stroke-dashoffset"
                    from="100.6"
                    to="0"
                    dur="0.66s"
                    repeatCount="indefinite"/>
            </circle>
        </mask>
    </defs>
    <path d="M18.53.359h.225A16.684 16.684 0 0130.56 5.12a16.902 16.902 0 014.813 12.007A18.372 18.372 0 0130.18 29.66l-.671.672a18.215 18.215 0 01-11.99 5.163l-.436.012h-.13A16.757 16.757 0 015.12 30.662a16.845 16.845 0 01-4.74-12.08A18.35 18.35 0 015.513 6.114l.307-.311A18.203 18.203 0 0118.095.371l.435-.012zM16.413 2.6c-3.508 0-6.778 1.443-9.558 4.253-3.306 3.299-4.719 7.273-4.102 11.522.495 3.425 2.323 6.938 5.012 9.63l.31.303c4.452 4.235 13.288 7.796 20.265 1.086l.248-.244.236-.248.354-.344a12.592 12.592 0 003.686-11.167 17.578 17.578 0 00-4.95-9.618c-2.689-2.699-6.17-4.532-9.597-5.032-.63-.093-1.267-.14-1.904-.141z" mask="url(#wipe)"/>
</svg>

您可能需要调整动画以在结尾处添加一个短暂的停顿。并根据您的 GIF 版本淡化颜色。

【讨论】：

【解决方案2】：

这里是path d 2 圆弧的解决方案，没有描边，只有填充：

let r = 90, 
    rx = 70/90,
    ry = 85/90,
    circ = Math.PI*2;

requestAnimationFrame(draw)

function draw(t) {

  t = (t/1000)%1;

  let a = t*circ,
  la = a % circ > Math.PI?1:0,
  x = r * Math.cos(a),
  y = r * Math.sin(a);

  path.setAttribute("d", [
   "M", r, 0,
   "A", r, r, 0, la, 1, x, y,
   "L", rx*x, ry*y,
   "A", r*rx, r*ry, 0, la, 0, r*rx, 0,
   "Z"
  ].join(" "));

  path.setAttribute("opacity", 1-t);

  requestAnimationFrame(draw);
}

<svg width=90vw height=90vh viewBox="-100,-100,200,200" >
  <path id="path" transform=rotate(-45) ></path>
</svg>

【讨论】：