原生 SVG 循环动画答案

【问题标题】：Native SVG looping animation原生 SVG 循环动画
【发布时间】：2016-08-14 00:11:13
【问题描述】：

我创建了一个非常简单的 SVG 动画，其中包含两个圆圈，一个实心圆圈和一个虚线圆圈。对外部虚线圆进行 360 度旋转的动画非常简单。

我想尝试的是通过缩小 10% 然后回到 100% 来让内部的实心圆“脉动”。

问题是，到目前为止，我为 animateTransform 找到的所有文档都只涉及 2 个“关键帧”，从到到。因此，圆圈将从 100% 变为 90%，然后会重复并跳回 100%。我正在寻找它来“乒乓”，去100->90->100->90等。

这可以用原生 SVG 动画（即没有 CSS 和库）来完成吗？

    <svg xmlns="http://www.w3.org/2000/svg" width="106" height="106" viewBox="0 0 106 106" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <circle id="a" cx="50" cy="50" r="50"/>
    <mask id="b" width="100" height="100" x="0" y="0" fill="white">
      <use xlink:href="#a"/>
    </mask>
  </defs>
  <g fill="none" fill-rule="evenodd" transform="translate(3 3)">
    <use stroke="#979797" stroke-width="12" mask="url(#b)" stroke-dasharray="6 9" xlink:href="#a">
 <animateTransform attributeName="transform"
                       attributeType="XML"
                       type="rotate"
                       from="0 50 50"
                       to="360 50 50"
                       dur="10s"
                       repeatCount="indefinite"  />
    </use>
    <circle cx="50.5" cy="50.5" r="36.5" fill="#D8D8D8"/>
  </g>
</svg>

【问题讨论】：

标签： css animation svg

【解决方案1】：

如果有人感兴趣，我找到了一个隐藏的答案。对于内圈：

  <circle cx="50.5" cy="50.5" r="36" fill="#084b86">
      <animate attributeName="r"
               values="36;20;36"
               dur="2s"
               repeatCount="indefinite" />
  </circle>

关键是values属性，可以取分号分隔的列表。

如果有人知道更好或更聪明的方法，请分享！

【讨论】：