css - 原生 SVG 循环动画

Question

我用两个圆圈创建了一个非常简单的 SVG 动画，一个实心圆圈在一个虚线圆圈中。制作外部虚线圆的 360 度旋转动画很简单。

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

问题是，到目前为止，我为 animateTransform 找到的所有文档都只涉及 2 个“关键帧”，from-to。因此，圆圈将从 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>

Answer 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 属性，它可以采用分号分隔的列表。

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