使用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标签内封闭并做你想！