CODEWITHSUNDEEP
javascriptsvg
user1203605
user1203605

Reputation: 83

Appending SVG object using JavaScript

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>

Upvotes: 0

Views: 3258

Answers (1)

Sirko
Sirko

Reputation: 74036

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

Upvotes: 1

Related Questions