stackoom
  简体   繁体   中英

how to use javascript with svg?

 原文  2015-03-13 17:56:03  8   1    javascript/ function/ svg

Question

I've tried to put JavaScript into SVG and all are in html file, when I wrote as showed in my code my SVG drawing disappear so what is the correct way to write JavaScript so that the SVG will be showed and the function can be applied to it. 

<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>

1 answers

solution1
 1 ACCPTED  2015-03-13 18:08:28

I have not fully tested the actual script code but if you move the javascript block after the <svg></svg> tags like I do in the following: 

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

You should see be able to see your image and test your function.

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How to use javascript to find the (svg) position of preexisting elements in an inline svg How to use svg text tag in javascript How to use an inline animation of a svg with a javascript on click? SVG: <use>, javascript, and animation How to use a svg inside a svg? How do I use javascript to insert an svg use element into an svg group? How do I use javascript to clone an SVG element? How can I use a Javascript variable to define the width of an SVG element? How to use javascript to extract an SVG map from a server How to remove or replace 'width' and 'height' attributes on the svg root use Javascript?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM