Question

13

Create SVG tag with JavaScript

rated 0 times [ 15] [ 2] / answers: 1 / hits: 48604 / 13 Years ago, mon, november 21, 2011, 12:00:00

How do I create an SVG element with JavaScript? I tried this:

var svg = document.createElement('SVG');

    svg.setAttribute('style', 'border: 1px solid black');

    svg.setAttribute('width', '600');

    svg.setAttribute('height', '250');

    svg.setAttribute('version', '1.1');

    svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');

document.body.appendChild(svg);

However it creates an SVG element with zero width and zero height.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

vanessag

Add To Favorites

Follow

Total Points: 170

Total Questions: 98

Total Answers: 88

Location: El Salvador

Member since Sun, Sep 12, 2021

3 Years ago

answered 13 Years ago gerardamosy · Accepted Answer

You forgot the Namespace URI of your svg element and xmlns attribute.

Also, version is ignored by all browsers.

var svg = document.createElementNS(http://www.w3.org/2000/svg, svg);

    svg.setAttribute('style', 'border: 1px solid black');

    svg.setAttribute('width', '600');

    svg.setAttribute('height', '250');

    svg.setAttributeNS(http://www.w3.org/2000/xmlns/, xmlns:xlink, http://www.w3.org/1999/xlink);

    document.body.appendChild(svg);