SVG 圆圈脉冲同步不起作用

SVG circles pulse synchronous doesn't work

本文关键字：同步 不起作用 脉冲 SVG      更新时间：2023-09-26

我想在对象窗口上每次单击时放置一个圆圈svg。

我的函数工作正常，但是我该怎么做才能使圆脉冲同步？

window.addEventListener("click",
    function(event){
        var myBody = document.getElementsByTagName("body")[0];
        var circleDiv = document.createElement("div");
        circleDiv.innerHTML = "<svg><circle cx='80' cy='80' r='20' stroke='black' fill='white' fill-opacity='0.0' /></svg>";
        circleDiv.style.position = "absolute";
        circleDiv.style.left = event.x+'px';
        circleDiv.style.top  = event.y+'px';
        var direction = 5;
        var radius = 20;
        window.setInterval(function()
        {
            radius = radius + direction;
            if(radius<10) direction = 5;
            if(radius>50) direction = -5;
            circleDiv.firstChild.firstChild.setAttribute("r",radius);
        },500);
        myBody.appendChild(circleDiv);
    }
);

如果通过"synchronus"，你们一起谈论pusle，你必须按原样拆分你的函数：

var direction = 1;
var radius = 20;

window.addEventListener("click",
    function(event){
        var myBody = document.getElementsByTagName("body")[0];
        var circleDiv = document.createElement("div");
        circleDiv.innerHTML = "<svg><circle cx='80' cy='80' r='" + radius + "' stroke='black' fill='white' fill-opacity='0.0' /></svg>";
        circleDiv.style.position = "absolute";
        circleDiv.style.left = event.x+'px';
        circleDiv.style.top  = event.y+'px';    
        myBody.appendChild(circleDiv);
    }
);

window.setInterval(function()
{
    var circles = document.getElementsByTagName('circle');
    radius = radius + direction;
    if(radius<10) direction = 1;
    if(radius>50) direction = -1;
    for(var i = 0; i < circles.length; i++) {
        circle = circles[i];
        circle.setAttribute("r",radius);
    }
 },20);

在这里 js小提琴

希望对;)有所帮助

当您添加圆圈时，将它们捕获在数组circles中，并且只有一个计时器来更新它们的大小。注意，我添加了将处理程序放在 jquery 文档就绪函数中。这是很好的做法。试试这个：

var circles = [];
var radius = 20;
var direction = 5;
jQuery(document).ready(function() {
   window.addEventListener("click", function(event){
    var myBody = document.getElementsByTagName("body")[0];
    var circleDiv = document.createElement("div");
    circleDiv.innerHTML = "<svg><circle cx='80' cy='80' r='20' stroke='black' fill='white' fill-opacity='0.0' /></svg>";
    circleDiv.style.position = "absolute";
    circleDiv.style.left = event.x + 'px';
    circleDiv.style.top  = event.y + 'px';
    circles.push(circleDiv);
    myBody.appendChild(circleDiv);
    });
  window.setInterval(function() {
    radius = radius + direction;
    if(radius<10) direction = 5;
    if(radius>50) direction = -5;
    for(var i = 0; i < circles.length; i++){
      circles[i].firstChild.firstChild.setAttribute("r",radius);
    }
   } ,500);

});

您可能希望确保您创建的 SVG 使用 radius 值来设置起始大小。

相关文章：