如何使用JavaScript與SVG？

我試圖將JavaScript放入SVG中，並且所有文件都在html文件中，當我按照我的代碼顯示的那樣寫入時，我的SVG繪圖消失，那麼編寫JavaScript的正確方法是什麼，以便顯示SVG以及函數可以應用於它。如何使用JavaScript與SVG？

<html> 
<head> 
</head> 
<body> 
    <aside> 
     height(rx) : <input type="number" name="number" id = "ipheight" 
    min ="0" max = "50"> 
    <input type="button" value="Resize" onclick="resize()"> 

     <input type="range" id="fthick" min="0" max="10" onchange="thickness()"><br> 
        <input type="radio" name="copies" id="one">One</br> 
      <input type="radio" name="copies" id="two">Two</br> 
      <input type="radio" name="copies" id="Three">Three</br> 
      <input type="radio" name="copies" id="Four">Four</br> 
     </aside> 
    </body> 
<script type="text/javascript"> 
<?xml version="1.0"?> 
<svg width="500" height="600" 
    viewPort="0 0 1200 1200" version="1.1" 
    xmlns="http://www.w3.org/2000/svg"> 

<circle cx="315" cy="300" r="15" style="fill:none;stroke:black;stroke-width:1"/> 
<g id = "first" style="fill:none;stroke:black;stroke-width:1"> 
<ellipse cx="355" cy="300" rx="25" ry="7" transform="rotate(45 315 300)"/> 
<ellipse cx="355" cy="300" rx="25" ry="7" transform="rotate(90 315 300)"/> 
<ellipse cx="355" cy="300" rx="25" ry="7" transform="rotate(135 315 300)"/> 
<ellipse cx="355" cy="300" rx="25" ry="7" transform="rotate(180 315 300)"/> 
<ellipse cx="355" cy="300" rx="25" ry="7" transform="rotate(225 315 300)"/> 
<ellipse cx="355" cy="300" rx="25" ry="7" transform="rotate(270 315 300)"/> 
<ellipse cx="355" cy="300" rx="25" ry="7" transform="rotate(315 315 300)"/> 
<ellipse cx="355" cy="300" rx="25" ry="7" transform="rotate(360 315 300)"/> 
</g> 
<g id= "second" style="stroke:black;stroke-width:1"> 
<line x1="380" y1="319" x2="420" y2="300" transform="rotate(45 315 300)"/> 
<line x1="420" y1="300" x2="380" y2="280" transform="rotate(45 315 300)"/> 
<line x1="380" y1="319" x2="420" y2="300" transform="rotate(90 315 300)"/> 
<line x1="420" y1="300" x2="380" y2="280" transform="rotate(90 315 300)"/> 
<line x1="380" y1="319" x2="420" y2="300" transform="rotate(135 315 300)"/> 
<line x1="420" y1="300" x2="380" y2="280" transform="rotate(135 315 300)"/> 
<line x1="380" y1="319" x2="420" y2="300" transform="rotate(180 315 300)"/> 
<line x1="420" y1="300" x2="380" y2="280" transform="rotate(180 315 300)"/> 
<line x1="380" y1="319" x2="420" y2="300" transform="rotate(225 315 300)"/> 
<line x1="420" y1="300" x2="380" y2="280" transform="rotate(225 315 300)"/> 
<line x1="380" y1="319" x2="420" y2="300" transform="rotate(270 315 300)"/> 
<line x1="420" y1="300" x2="380" y2="280" transform="rotate(270 315 300)"/> 
<line x1="380" y1="319" x2="420" y2="300" transform="rotate(315 315 300)"/> 
<line x1="420" y1="300" x2="380" y2="280" transform="rotate(315 315 300)"/> 
<line x1="380" y1="319" x2="420" y2="300" transform="rotate(360 315 300)"/> 
<line x1="420" y1="300" x2="380" y2="280" transform="rotate(360 315 300)"/> 
</g> 

<g id = "third" style="fill:none;stroke:black;stroke-width:1"> 
<ellipse cx="390" cy="300" rx="60" ry="20" transform="rotate(45 315 300)"/> 
<ellipse cx="390" cy="300" rx="60" ry="20" transform="rotate(90 315 300)"/> 
<ellipse cx="390" cy="300" rx="60" ry="20" transform="rotate(135 315 300)"/> 
<ellipse cx="390" cy="300" rx="60" ry="20" transform="rotate(180 315 300)"/> 
<ellipse cx="390" cy="300" rx="60" ry="20" transform="rotate(225 315 300)"/> 
<ellipse cx="390" cy="300" rx="60" ry="20" transform="rotate(270 315 300)"/> 
<ellipse cx="390" cy="300" rx="60" ry="20" transform="rotate(315 315 300)"/> 
<ellipse cx="390" cy="300" rx="60" ry="20" transform="rotate(360 315 300)"/> 
</g> 

function resize() { 
    var resno = ipheight.value; 
     document.getElementById("third").setAttribute("resno"); 
</script> 

</svg> 
</html>

來源

2015-03-13 Farah AlQ

您正在做''嘗試修復該問題。 – Prusse 2015-03-13 17:59:25

請注意，XML聲明（'<？xml version =「1.0」？>'東西）在XHTML中唯一有意義，並且不能出現在文檔的中間。它可能只出現在最上面（即在「」和任何「」之前）。由於您不使用XHTML，因此不要使用它。但是，這不是你所問的問題的原因。 – 2015-03-13 20:43:27

我還沒有完全測試的實際腳本代碼，但如果你的<svg></svg>標籤後移動的JavaScript塊就像我在下面做：

</svg> 
<script type="text/javascript"> 
function resize() { 
    var resno = ipheight.value; 
     document.getElementById("third").setAttribute("resno"); 
</script>  
</html>

您應該看到能夠看到你的形象並測試你的功能。

來源

2015-03-13 18:08:28 JKirkbride

感謝它的工作 – 2015-03-13 19:34:06

如何使用JavaScript與SVG？

回答

相關問題