Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Creating SVG elements dynamically with javascript inside HTML

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.

like image 943
user2746087 Avatar asked Dec 12 '13 09:12

user2746087


People also ask

Can SVG integrate with JavaScript?

Like HTML, SVGs are represented using the Document Object Model (DOM) and so can be manipulated with Javascript relatively easily, especially if you are familiar with using JS with HTML. All the code examples can be found by following the Github link at the top of this post.

Can SVG elements be embedded in HTML?

You can embed SVG elements directly into your HTML pages.

Is SVG JavaScript dependent?

SVGs are considered to be more accessible as they support text, and canvas is dependent on Javascript. So, the event that the browser does not support SVG but still text can be displayed. If Javascript has been disabled, then the device cannot be able to interpret the javascript output.

Is SVG dynamic?

You can see that the final markup for both SVG is exactly the same. The only difference is one is static in the HTML, the other is created dynamically via javascript.


2 Answers

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

like image 62
Denys Séguret Avatar answered Sep 28 '22 08:09

Denys Séguret


To facilitate svg editing you can use an intermediate function:

function getNode(n, v) {   n = document.createElementNS("http://www.w3.org/2000/svg", n);   for (var p in v)     n.setAttributeNS(null, p, v[p]);   return n } 

Now you can write:

svg.appendChild( getNode('rect', { width:200, height:20, fill:'#ff0000' }) ); 

Example (with an improved getNode function allowing camelcase for property with dash, eg strokeWidth > stroke-width):

function getNode(n, v) {    n = document.createElementNS("http://www.w3.org/2000/svg", n);    for (var p in v)      n.setAttributeNS(null, p.replace(/[A-Z]/g, function(m, p, o, s) { return "-" + m.toLowerCase(); }), v[p]);    return n  }    var svg = getNode("svg");  document.body.appendChild(svg);    var r = getNode('rect', { x: 10, y: 10, width: 100, height: 20, fill:'#ff00ff' });  svg.appendChild(r);    var r = getNode('rect', { x: 20, y: 40, width: 100, height: 40, rx: 8, ry: 8, fill: 'pink', stroke:'purple', strokeWidth:7 });  svg.appendChild(r);
like image 21
Joseph Merdrignac Avatar answered Sep 28 '22 06:09

Joseph Merdrignac