JavaScript createElementNS and SVG

by

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>

More Related Contents:

  1. Create SVG tag with JavaScript
  2. How to use z-index in svg elements?
  3. Alternative for deprecated SVG pathSegList
  4. How to check if an embedded SVG document is loaded in an html page?
  5. How can d3.transform be used in d3 v4?
  6. d3 add text to circle
  7. jQuery Selector + SVG Incompatible?
  8. Save inline SVG as JPEG/PNG/SVG
  9. SVG re-ordering z-index (Raphael optional)
  10. Hit-testing SVG shapes?
  11. Convert inline SVG to Base64 string
  12. How to access the content of the “embed” tag in HTML
  13. How to start an animated SVG on entering viewport?
  14. D3 – how to deal with JSON data structures?
  15. How do you detect support for VML or SVG in a browser
  16. Including SVG template in Angularjs directive
  17. SVG – click is not a function [duplicate]
  18. Add names of the states to a map in d3.js
  19. Add text label to d3 node in Force directed Graph and resize on hover
  20. Convert SVG Path to Absolute Commands
  21. Creating SVG graphics using Javascript?
  22. Scripting data in SVG (reading and modifying)
  23. Rasterizing an in-document SVG to Canvas
  24. Accessing a DOM object defined in an external SVG file
  25. Dynamically created SVG elements are not rendered by the browser
  26. How to implement SVG’s preserveAspectRatio=”xMinYMin slice” for canvas drawImage method.
  27. Perspective transform of SVG paths (four corner distort)
  28. draw text in d3 arc javascript
  29. jQuery SVG vs. Raphael [closed]
  30. Create a table in SVG

Leave a Comment