Size of Createelement("Svg") Is 0,0

size of createElement(svg) is 0,0

createElement can only create HTML elements, you need createElementNS

var svg=document.createElementNS("http://www.w3.org/2000/svg", "svg");document.body.appendChild(svg);svg.setAttribute("class","jscreated");svg.style.width="500px";svg.style.height="400px";

<svg class="HTML_SVG" style="width:500px; height:400px;" class="HTML_SVG"></svg>

SVG not working when inserted from Javascript

Use createElementNS instead of createElement for SVG elements.

const ns = 'http://www.w3.org/2000/svg';
class Spinner {    constructor(target) {        this.target = document.getElementById(target);
        const spinner = document.createElementNS(ns, 'svg');        spinner.setAttribute('width', '100');        spinner.setAttribute('height', '100');
        const spinnerPath = document.createElementNS(ns, 'circle');        spinnerPath.setAttribute('fill', 'red');        spinnerPath.setAttribute('stroke', 'black');        spinnerPath.setAttribute('stroke-width', '3');        spinnerPath.setAttribute('cx', '50');        spinnerPath.setAttribute('cy', '50');        spinnerPath.setAttribute('r', '40');
        spinner.appendChild(spinnerPath);
        this.target.appendChild(spinner);    }}
new Spinner('here');

<div id="here"></div>

How do I set the size of an SVG element using JavaScript?

You can try this code

function svg(){ // create the svg element    const svg1 = document.createElementNS("http://www.w3.org/2000/svg", "svg");
    // set width and height    svg1.setAttribute("width", "500");    svg1.setAttribute("height", "500");
    // create a circle    const cir1 = document.createElementNS("http://www.w3.org/2000/svg", "circle");    cir1.setAttribute("cx", "200");    cir1.setAttribute("cy", "200");    cir1.setAttribute("r", "200");    cir1.setAttribute("fill", "red");
    // attach it to the container    svg1.appendChild(cir1);
    // attach container to document    document.getElementById("svg54583").appendChild(svg1);
}
svg();

<div id="svg54583"></div>

JavaScript createElementNS and SVG

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>

SVG circle does not appear when in a a tag

The cx and cy attributes on the circle are the centre x-y coordinates. This means that the centre of your circle is [343, 303] from the top-left of the SVG element. Anything outside of the SVG will not be visible, so if those coordinates are greater than the width or height of the SVG, the circle will appear outside of the SVG bounds.

Your SVG does not have any width of height dimensions, nor a viewBox, meaning that the circle has coordinates well outside of the viewBox/width/height.

You should either try setting a width/height to the SVG, or a viewBox (in the format viewBox ="0 0 100 100", for example) and setting the cx and cy of the circle within the viewBox.

Something like:

svgmap.setAttribute("width", (posX * 2));
svgmap.setAttribute("height", (posY * 2));
svgmap.setAttribute("viewBox", "0 0 " + (posX * 2) + " " + (posY * 2));

Might do the trick.

Edit: As Lee Taylor says above, whilst the <a> tag is a HTML element too, within an SVG it has a different meaning, and should be created the same as other SVG elements. So whilst creating an a tag within document.body would be:

document.body.appendChild(document.createElement('a'));

For an SVG, you would need to change var atag = document.createElement('a') to be:

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

---

Related Topics