Home/ Questions/Q 6170579
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T23:03:44+00:00

I’m having some trouble with manipulating SVGs through javascript. I’d like to increase the

  • 0

I’m having some trouble with manipulating SVGs through javascript. I’d like to increase the length of a line through clicking a button. I’ve included this code in the head tag:

<script type="text/javascript">
x=135;
y=135;
var container = document.getElementById("svgbox");
var mySvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");


function svg() {
mySvg.setAttribute("version", "1.2");
mySvg.setAttribute("baseProfile", "tiny");
mySvg.setAttribute("height","300px");
mySvg.setAttribute("width","300px");
container.appendChild(mySvg);
}

function line() {
x=x-10;
y=y-10;
var L1 = document.createElementNS("http://www.w3.org/2000/svg", "line");
    L1.setAttribute("x1", "100"); L1.setAttribute("y1", "100");
    L1.setAttribute("x2", x); L1.setAttribute("y2", y);
    L1.setAttribute("stroke", "#05adc7");
    L1.setAttribute("stroke-width", "2px");
    mySvg.appendChild(L1);
}
</script>

This is the body text:

<body onload="svg()">
<form>
<input type="button" onClick="line()" />
</form>
<div id="svgbox">
</div>
</body>

But when I click on the button, I get an error telling me that the variable “container” is null. Does anyone know what the problem is?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It works if you put the line var container = document.getElementById("svgbox"); in the svg function.

    function svg() {
var container = document.getElementById("svgbox");
mySvg.setAttribute("version", "1.2");
mySvg.setAttribute("baseProfile", "tiny");
mySvg.setAttribute("height","300px");
mySvg.setAttribute("width","300px");
container.appendChild(mySvg);
}

    The reason container is null in your code is because the DOM has not loaded yet when the line var container = document.getElementById("svgbox"); gets executed.

    You need to declare container after either the DOMContentLoaded event or window.onload event is fired.

    • 0