Menu
I want to create inline SVG graphics using Javascript.
However, it seems like createElementNS function applies some normalization and transforms all tags to lowercase. That is fine for HTML but not for XML/SVG. The NS I used is http://www.w3.org/2000/svg.
In particular I have problems creating a element. As it will be appended as <textpath> and thus will not work.
I did some search but could not find a solution yet.
Does anybody know a solution?
document.createElementNS("http://www.w3.org/2000/svg","textPath"); results in
<textpath></textpath> 
569
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.
createElementNS() Creates an element with the specified namespace URI and qualified name. To create an element without specifying a namespace URI, use the createElement() method.
Scalable Vector Graphics (SVG) are an XML-based markup language for describing two-dimensional based vector graphics.
SVG stands for Scalable Vector Graphics. SVG is an XML-based vector graphics format. It provides options to draw different shapes such as Lines, Rectangles, Circles, Ellipses, etc. Hence, designing visualizations with SVG gives you more power and flexibility.
I hope, the following example will help you:
function CreateSVG() { var xmlns = "http://www.w3.org/2000/svg"; var boxWidth = 300; var boxHeight = 300; var svgElem = document.createElementNS(xmlns, "svg"); svgElem.setAttributeNS(null, "viewBox", "0 0 " + boxWidth + " " + boxHeight); svgElem.setAttributeNS(null, "width", boxWidth); svgElem.setAttributeNS(null, "height", boxHeight); svgElem.style.display = "block"; var g = document.createElementNS(xmlns, "g"); svgElem.appendChild(g); g.setAttributeNS(null, 'transform', 'matrix(1,0,0,-1,0,300)'); // draw linear gradient var defs = document.createElementNS(xmlns, "defs"); var grad = document.createElementNS(xmlns, "linearGradient"); grad.setAttributeNS(null, "id", "gradient"); grad.setAttributeNS(null, "x1", "0%"); grad.setAttributeNS(null, "x2", "0%"); grad.setAttributeNS(null, "y1", "100%"); grad.setAttributeNS(null, "y2", "0%"); var stopTop = document.createElementNS(xmlns, "stop"); stopTop.setAttributeNS(null, "offset", "0%"); stopTop.setAttributeNS(null, "stop-color", "#ff0000"); grad.appendChild(stopTop); var stopBottom = document.createElementNS(xmlns, "stop"); stopBottom.setAttributeNS(null, "offset", "100%"); stopBottom.setAttributeNS(null, "stop-color", "#0000ff"); grad.appendChild(stopBottom); defs.appendChild(grad); g.appendChild(defs); // draw borders var coords = "M 0, 0"; coords += " l 0, 300"; coords += " l 300, 0"; coords += " l 0, -300"; coords += " l -300, 0"; var path = document.createElementNS(xmlns, "path"); path.setAttributeNS(null, 'stroke', "#000000"); path.setAttributeNS(null, 'stroke-width', 10); path.setAttributeNS(null, 'stroke-linejoin', "round"); path.setAttributeNS(null, 'd', coords); path.setAttributeNS(null, 'fill', "url(#gradient)"); path.setAttributeNS(null, 'opacity', 1.0); g.appendChild(path); var svgContainer = document.getElementById("svgContainer"); svgContainer.appendChild(svgElem); }#svgContainer { width: 400px; height: 400px; background-color: #a0a0a0; }<body onload="CreateSVG()"> <div id="svgContainer"></div> </body>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
