Creating Svg Elements Dynamically With JavaScript Inside Html

Creating SVG elements dynamically with javascript inside HTML

Change

var svg   = document.documentElement;

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

Dynamically created SVG elements are not rendered by the browser

you have to use "document.createElementNS("http://www.w3.org/2000/svg", "svg");" to create svg elements

var container = document.createElement("div");var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
var circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");circle.setAttribute("cx", "20");circle.setAttribute("cy", "20");circle.setAttribute("r", "15");
svg.appendChild(circle);container.appendChild(svg);document.body.appendChild(container);

Create SVG tag with JavaScript

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

Dynamically created SVG is rendered into HTML but not displayed properly

use createElementNS and that will solve your problem.

var out = document.getElementById("output");var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");svg.setAttribute('style', 'background-color:#bada55');svg.setAttribute('width', '50');svg.setAttribute('height', '50');svg.innerHTML = "why is this not displayed as SVG?";svg.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "http://www.w3.org/1999/xlink");
out.appendChild(svg);

<div id="output">  <svg width="50" height="50" style="background-color:beige">This one is OK</svg></div>

Create many SVG `<use>` elements dynamically

Try

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

instead of

var use = document.createElement('use');

Source: this answer.

dynamic svg element added by Javascript doesn't work

Use

document.createElementNS('http://www.w3.org/2000/svg', 'svg')

instead of

document.createElement('svg')

Explanation:

SVG elements must be created in the SVG namespace and cannot therefore be created by createElement, instead you must use createElementNS providing the SVG namespace as the first argument.

createElement basically creates html elements called svg and circle rather than SVG elements.

text/html doesn't really have namespaces so the HTML parser magically switches to the SVG namespace when it encounters an <svg> element. If you changed the mime type to some XML namespace e.g. http://www.w3.org/1999/xhtml/ then you'd need an xmlns attribute on the root <html> element and also on the <svg> element.

<html>   <head> <script type="text/javascript">     function doit()  {   var svgdiv = document.getElementById('svg1');   for (var k = 1; k < 3; ++k)   {    var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');    svg.setAttribute('width',100);    svg.setAttribute('height',100);    console.log(svg);    var c = document.createElementNS('http://www.w3.org/2000/svg', 'circle');    c.setAttribute('cx',50);    c.setAttribute('cy',50);    c.setAttribute('r',40);    c.setAttribute('stroke','green');    c.setAttribute('stroke-width',4);    c.setAttribute('fill','yellow');    svg.appendChild(c);    svgdiv.appendChild(svg);   }  }  window.onload = doit; </script>  </head>  <body> <svg width="100" height="100">   <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> </svg>      <div id="svg1"></div>   </body></html>

standalone svg add element dynamically with javascript

When your SVG element is displayed as the main document in your browser, it is actually an element of a generated document, so you can simply use techniques already familiar from javascript:

var svg = document.querySelector('svg')

Since the SVG is not a document, you cannot use it to create elements, but you can use the document itself to create new shapes:

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

And then you can append them to your new-found svg element. I have amended your code for clarity. If this is not working, what exactly are you using to display these SVGs? Since if they have support for 'ecmascript' (aka javascript), they must also support at least the functionality described in the spec.

<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg id ="testsvg"  width="1000" height="500" viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" version="1.1">  <desc>    Example script01 - invoke an ECMAScript function from an onclick event  </desc>    <!-- ECMAScript to change the radius with each click -->  <script type="text/javascript">    function circle_click( evt ){          var circle = evt.target;      var currentRadius = circle.getAttribute("r");            if( currentRadius == 100 ){              circle.setAttribute("r", currentRadius*2);            } else {              circle.setAttribute("r", currentRadius*0.5);            }          }        function make_shape( evt ){         var svg = document.querySelector('svg');      var shape = document.createElementNS('http://www.w3.org/2000/svg', 'circle');            shape.setAttribute("cx", 25);      shape.setAttribute("cy", 25);      shape.setAttribute("r",  20);      shape.setAttribute("style", "fill: green");            svg.appendChild( shape );          }      </script>
  <!-- Outline the drawing area with a blue line -->  <rect x="1" y="1" width="900" height="498" fill="none" stroke="blue"/>
  <!-- Act on each click event -->  <circle onclick="circle_click(evt)" cx="300" cy="225" r="50" fill="red"/>  <!-- Act on each click event -->  <circle onclick="make_shape(evt)" cx="500" cy="225" r="50" fill="yellow"/>       <text x="500" y="380" font-family="Verdana" font-size="35" text-anchor="middle">    Click on red circle to change its size.  </text>   <text x="500" y="480" font-family="Verdana" font-size="35" text-anchor="middle">    Click on yellow circle to add a circle  </text>  </svg>

Creating Svg Elements Dynamically With JavaScript Inside Html