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

最简单的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>

Answer 2

尝试使用svg smil动画

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

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

2 个答案: