How can I add shapes to an SVG using javascript?

Asked Oct 14 '16 at 05:31

Active Oct 14 '16 at 05:31

Viewed 238 times

Anything I try to add with javascript doesn't show up. Here is the html.

<svg width="100" height="100" id="test">
    <rect width="10" height="10" style="fill:rgb(0,0,255);">
</svg>

The rectangle shows up fine. Here is the javascript:

var b = document.createElement('rect');
b.setAttribute('width', 100);
b.setAttribute('height', 100);
b.setAttribute('style', 'fill:rgb(0,0,255);');
document.getElementById('test').appendChild(b);

Inspect shows this:

<svg width="100" height="100" id="test">
    <rect width="10" height="10" style="fill:rgb(0,0,255);">
    <rect width="100" height="100" style="fill:rgb(0,0,255);">
</svg>

But b doesn't show up. Does the svg have to be updated or something?

Note: I would like to avoid external libraries like jQuery and keep this a simple as possible.

asked Oct 14 '16 at 05:31

twharmon

4,153
5
22
48

Side-note: jQuery does not generally support SVG, so don't use that anyway. – Alexander O'Mara Oct 14 '16 at 05:33
You need to use `createElementNS( svgNS, 'rect' )`, where `svgNS` is the SVG namespace: `"http://www.w3.org/2000/svg"`. – Phrogz Oct 14 '16 at 05:35
@Phrogz is there a way to use that namespace without having to link to it? Like download some file? – twharmon Oct 14 '16 at 05:41
1

you're not linking to it by using it there – Jaromanda X Oct 14 '16 at 05:42
@billyhafiz Go read the related pages. See how they just use the string directly (or, if you have the namespace on your ` – Phrogz Oct 14 '16 at 05:43
Will that work without an internet connection? – twharmon Oct 14 '16 at 05:43
1

@billyhafiz Yes. It is just a string. It looks like a URL (it is a URL), but no resources are requested from that URL. It is just a special, unique identifier. – Phrogz Oct 15 '16 at 03:25

How can I add shapes to an SVG using javascript?

0 Answers0