SVG圓形脈衝同步不起作用

我想爲每個點擊一個圓圈svg放置物體窗口。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); 

    } 
);

來源

2016-03-07 ElDon90

請花[旅遊]（HTTP ：//stackoverflow.com/tour）瞭解如何提出關於SO的問題。像這樣的問題：給我XY的解決方案不可能得到回答。到目前爲止你做了什麼？你是什麼意思'使圓脈衝同步'。此外，過度使用標點符號並不會使任何人更快地回答 – Peter

好的抱歉。我會盡快修改我的問題。感謝您的建議。 – ElDon90

如果 '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);

Here the jsFiddle

希望它幫助;）

來源

2016-03-07 13:34:27 Yoplaboom

是的，它幫助:)這是我一直在尋找。非常感謝。 – ElDon90

當您添加的圈子捕捉他們在一個數組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); 


});

你可能想確保你創建使用radius值來設置起始大小的SVG。

來源

2016-03-07 13:34:10

SVG圓形脈衝同步不起作用

回答

相關問題