使用SVG在html頁面中顯示動態圓圈

Question

下面的代碼是一個簡單的表單，它接受來自用戶的數字並顯示在表單中輸入的半徑的圓。一切工作都很好，只是當我點擊提交按鈕時，圓圈就消失了。如何解決這個問題？我點擊提交按鈕後，我希望該圈子在那裏很久。

<title>Dynamic Vector Circle</title> 

<script type="text/javascript"> 

    var svgNS = "http://www.w3.org/2000/svg"; 

    function createCircle() 
    { 
     var myCircle = document.createElementNS(svgNS,"circle"); //to create           a circle, for rectangle use rectangle 
     var radius= document.getElementById("rad").value; 
     myCircle.setAttributeNS(null,"id","mycircle"); 
     myCircle.setAttributeNS(null,"cx",100); 
     myCircle.setAttributeNS(null,"cy",100); 
     myCircle.setAttributeNS(null,"r",radius); 
     myCircle.setAttributeNS(null,"fill","black"); 
     myCircle.setAttributeNS(null,"stroke","none"); 

     document.getElementById("mySVG").appendChild(myCircle).innerHTML; 
    }     

</script> 

<form> 
    <input type="text" id="rad" placeholder="Enter radius"> 
    <button onClick="createCircle();">Submit</button> 

    <svg id="mySVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
</svg> 

</form> 

Answer 1

問題是單擊按鈕上的表單的默認操作是提交。爲了避免提交，您可以從綁定到該按鈕的功能return false。因此，如果您將createCircle的末尾更改爲：

... 
    return false; 
} 

它會按照您的期望工作。這裏是整個函數：

function createCircle() 
{ 
    var myCircle = document.createElementNS(svgNS,"circle"); //to create           a circle, for rectangle use rectangle 
    var radius= document.getElementById("rad").value; 
    myCircle.setAttributeNS(null,"id","mycircle"); 
    myCircle.setAttributeNS(null,"cx",100); 
    myCircle.setAttributeNS(null,"cy",100); 
    myCircle.setAttributeNS(null,"r",radius); 
    myCircle.setAttributeNS(null,"fill","black"); 
    myCircle.setAttributeNS(null,"stroke","none"); 

    document.getElementById("mySVG").appendChild(myCircle).innerHTML; 

    return false; 
} 

的jsfiddle：http://jsfiddle.net/252yLdqx/2/

或者你可以改變button與type="button"的input將不會有默認行爲提交表單：

<input type="button" id="create" value="Create"/>

JSFiddle：http://jsfiddle.net/252yLdqx/3/

或者你可以改變button有type="button"覆蓋默認type="submit"像這樣：

<button type="button" onClick="createCircle();">Submit</button>

或者你也可以不form標籤內封閉並做你想！