0
我试图将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>
您正在做''尝试修复该问题。 – Prusse 2015-03-13 17:59:25
请注意,XML声明('<?xml version =“1.0”?>'东西)在XHTML中唯一有意义,并且不能出现在文档的中间。它可能只出现在最上面(即在“”和任何“”之前)。由于您不使用XHTML,因此不要使用它。但是,这不是你所问的问题的原因。 – 2015-03-13 20:43:27