Question

136

Creating SVG elements dynamically with javascript inside HTML

rated 0 times [ 140] [ 4] / answers: 1 / hits: 180433 / 11 Years ago, thu, december 12, 2013, 12:00:00

I want to create a rectangle inside an HTML page, then write some text on that rectangle. I also need that text to be a hyperlink. This is what I did but it is not working:

    <!DOCTYPE html>

<html>

<body>



<script>



    var svg   = document.documentElement;

    var svgNS = svg.namespaceURI;



    var rect = document.createElementNS(svgNS,'rect');

    rect.setAttribute('x',5);

    rect.setAttribute('y',5);

    rect.setAttribute('width',500);

    rect.setAttribute('height',500);

    rect.setAttribute('fill','#95B3D7');

    svg.appendChild(rect);

    document.body.appendChild(svg);



    var h=document.createElement('a');

    var t=document.createTextNode('Hello World');

    h.appendChild(t);

    document.body.appendChild(h);





</script>



</body>

</html>

Can you help please?
Thanks.

Answers

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

debras

Add To Favorites

Follow

Total Points: 307

Total Questions: 98

Total Answers: 112

Location: Maldives

Member since Tue, Dec 21, 2021

2 Years ago

answered 11 Years ago havenbilliec · Accepted Answer

Change

var svg   = document.documentElement;

to

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

so that you create a SVG element.

For the link to be an hyperlink, simply add a href attribute :

h.setAttributeNS(null, 'href', 'http://www.google.com');

Demonstration