如何在svg中使用javascript？

Question

我試圖將JavaScript放入SVG中，並且全部都在html文件中，當我按代碼所示編寫時，我的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>

Answer 1

我還沒有完全測試實際的腳本代碼，但是如果您將javascript塊移到<svg></svg>標記之后，就像我在下面所做的那樣：

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

您應該看到能夠看到您的圖像並測試您的功能。

如何在svg中使用javascript？

問題描述

1 個解決方案

解決方案1
1 已采納 2015-03-13 18:08:28

如何在svg中使用javascript？

問題描述

1 個解決方案

解決方案1 1 已采納 2015-03-13 18:08:28

解決方案1
1 已采納 2015-03-13 18:08:28