Question

我正在尝试为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，但如果可能的话，只想尝试使用路径坐标。

Answer 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版本淡化颜色。

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

动画SVG路径d = ...无笔触的坐标

2 个答案: