Appending SVG object using JavaScript

Question

I'm new to Javasscript and SVG and can successfully generate an inline SVG object and change attributes.

I've also tried cutting and pasting code to add an SVG object dynamically with no luck. Here's the code I've tried...

<html>
<head>
<script>
function setColor(color)
{
document.getElementById("rect").style.fill = color;
document.getElementById("rect").setAttribute("height",100);
document.getElementById("line").style.stroke = color;
document.getElementById("myLine").style.stroke = "blue";
}
    var myrect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
    myrect.setAttribute("id", "myrect"); 
    myrect.setAttribute("fill","red");
    myrect.setAttribute("stroke","black");
    myrect.setAttribute("stroke-width","5");
    myrect.setAttribute("x", "100");
    myrect.setAttribute("y", "100");
    myrect.setAttribute("width", "300");
    myrect.setAttribute("height", "300");
    svg.appendChild(myrect);
    </script>
</head>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width: 300px; height: 250px">
<rect x="50" y="20" width="200" height="200" style="fill:red; stroke:black; stroke-width:3" id="rect" />

<line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" id="line"/>

<line x1="10" y1="10" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:5" id="myLine"/>

</svg>

<button onclick="setColor('red');">Red</button>
<button onclick="setColor('green');">Green</button>
<button onclick="setColor('blue');">Blue</button>

</body>
</html>

Sirko · Accepted Answer · 2013-02-16 09:05:20Z

Your problem is, that you try to modify parts of the DOM, which are not parsed at that point. Just move a <script> tag to the bottom of your page and let the <rect> be created there and it will work:

<html>
<head>
<script>
function setColor(color)
{
document.getElementById("rect").style.fill = color;
document.getElementById("rect").setAttribute("height",100);
document.getElementById("line").style.stroke = color;
document.getElementById("myLine").style.stroke = "blue";
}
    </script>
</head>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width: 300px; height: 250px" id="mySvg">
<rect x="50" y="20" width="200" height="200" style="fill:red; stroke:black; stroke-width:3" id="rect" />

<line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" id="line"/>

<line x1="10" y1="10" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:5" id="myLine"/>

</svg>

<button onclick="setColor('red');">Red</button>
<button onclick="setColor('green');">Green</button>
<button onclick="setColor('blue');">Blue</button>

<script>
    var svg = document.getElementById( 'mySvg' );
    var myrect = document.createElementNS( "http://www.w3.org/2000/svg", 'rect');
    myrect.setAttribute("id", "myrect"); 
    myrect.setAttribute("fill","red");
    myrect.setAttribute("stroke","black");
    myrect.setAttribute("stroke-width","5");
    myrect.setAttribute("x", "100");
    myrect.setAttribute("y", "100");
    myrect.setAttribute("width", "300");
    myrect.setAttribute("height", "300");
    svg.appendChild(myrect);
</script>
</body>
</html>

Besides, you should explicitly select the <svg> element and then add to it. Use, e.g., getElementById() for this.

Working Example Fiddle

Collectives™ on Stack Overflow

Appending SVG object using JavaScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related