javascript - 如何设置 SVG 内圆圈中的参数之一的样式？

Question

我有一个 SVG，里面有圆圈。我希望它们的半径永远增加和减少(就像一个脉动的圆圈)。

我的问题是，我可以使用@keyframes 来完成吗？或者我需要jquery吗？如果是这样，怎么做到的？

这是我的代码:

<div class="mapa">
    <svg (svg code here......)
        <circle opacity="0.3" cx="842" cy="451.814" r="25.582" id="1"/>
        <circle opacity="0.3" cx="542" cy="405.814" r="25.582" id="1"/>
    </svg>
</div>

如何设置“r”参数的样式？

我读到我无法设置“r”参数的样式，但这行得通:

<circle cx="168" cy="179" r="59"
        fill="white" stroke="black"
        onmouseover="evt.target.setAttribute('r', '72');"
        onmouseout="evt.target.setAttribute('r', '59');"
/>

但是，我想做半径不断增减？而不是 mouseover/mouseleave。类似于(r=25，然后 r=30，然后回到 25，一直持续下去)。我该怎么做？

感谢您的宝贵时间，如果您能给我任何提示，我将不胜感激!

Answer 1

尝试使用svg smil animate

<svg width="150" height="150">

  <circle opacity="0.3" cx="84%" cy="45%" r="3" id="1">
    <animate attributeName="r" values="3; 10; 3" keyTimes="0; 0.5; 1" dur="1s" repeatCount="indefinite" />
  </circle>
  
  <circle opacity="0.3" cx="50%" cy="50%" r="10" id="2">
    <animate attributeName="r" values="10; 3; 10" keyTimes="0; 0.5; 1" dur="1s" repeatCount="indefinite"/>
  </circle>

</svg>