Creating SVG elements dynamically with javascript inside HTML

Question

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        lt  DOCTYPE html gt   lt html gt   lt body gt    lt script gt       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      lt  script gt    lt  body gt   lt  html gt    Can you help please   Thanks

User · Answer

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):

_x000D_

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

_x000D_

User · Answer

Add this to html    lt svg id  mySVG  xmlns  http   www w3 org 2000 svg  xmlns xlink  http   www w3 org 1999 xlink   gt    Try this function and adapt for you program   var svgNS    http   www w3 org 2000 svg      function createCircle         var myCircle   document createElementNS svgNS  circle      to create a circle  for rectangle use  rectangle      myCircle setAttributeNS null  id   mycircle        myCircle setAttributeNS null  cx  100       myCircle setAttributeNS null  cy  100       myCircle setAttributeNS null  r  50       myCircle setAttributeNS null  fill   black        myCircle setAttributeNS null  stroke   none         document getElementById  mySVG   appendChild myCircle

User · 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

[javascript] Creating SVG elements dynamically with javascript inside HTML

Examples related to javascript

Examples related to html

Examples related to svg