javascript - SVG圆脉冲同步不起作用

Question

我想在对象窗口上每次单击时定位一个圆形 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);

    }
);

Answer 1

如果通过“同步”您一起谈论脉冲，您必须按原样拆分您的功能:

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

Here the jsFiddle

希望有帮助;)