Как мне стилизовать один из параметров в кругу внутри 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>

Answer 2

Самое простое решение в CSS с небольшим взломом SVG-контейнеров. Вы меняете контейнер, а не svg. Элемент circle просто заполняет 100% контейнера. И контейнер искусственно образует круг с border-radius.

svg {
  border-radius: 50%;
  transition: all 1s;
}
svg:hover {
  width: 200px;
  height: 200px;
}

<svg width="100" height="100">
  <circle cx="50" cy="50" r="100%"
  fill="green" />
</svg>

Вы можете выяснить, как реализовать свои собственные ключевые кадры, если это решение работает для вас.

И чтобы было ясно, JQuery - это фреймворк. Вы не должны поднимать JQuery, если этот вопрос не о фреймворке JQuery. Язык, который вы ищете, это «Javascript», и он по умолчанию во всех основных браузерах. Вы можете использовать Javascript для этого.

const grow = function(radius) {
  var circle = document.getElementsByTagName("circle")[0];
  circle.setAttribute('r', radius);
}

setTimeout(function() {
  grow(100);
  setTimeout(function() {
    grow(40);
  }, 2000);
}, 2000);

circle {
  transition: all 1s;
}

<svg width="200" height="200">
  <circle cx="100" cy="100" r="40"
  fill="green" />
</svg>