CODEWITHSUNDEEP
javascripthtmlcsssvg
Piao
Piao

Reputation: 39

SVG element nested in another SVG element has 0px*0px size

I'm building a web-based SVG editing program by javascript. During this, I faced very strange issue. I made SVG element and appended it inside another SVG element. But nested SVG element always has 0px*0px size. I confirmed that it has right values for width and height attributes on Inspector, but it's displayed as zero size.

Here is my whole code.

index.html

<html>
<head>
<title>SVG Test</title>
   <meta charset="utf-8"/>
   <meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1"/>
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
   <meta name="apple-mobile-web-app-capable" content="yes"/>

   <link rel="stylesheet" href="svgtest.css" type="text/css"/>
   <script src="svgtest.js"></script>
</head>
<body style="overflow: hidden">
   <div id="workarea">
      <div id="svgcanvas" style="position: relative">
      </div><!-- <div id="svgcanvas"> -->
   </div><!-- <div id="workarea"> -->

   <script>
      window.onload = function() {
         initSVGPanel(document.getElementById('svgcanvas'));
      }
   </script>
</body>
</html>

svgtest.css

body {
    background: #2c473a;
}

html, body, div {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}

#workarea * {
    transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
}

#workarea {
    display: inline-table-cell;
    position:absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 50px;
    background-color: #A0A0A0;
    border: 1px solid #808080;
    overflow: scroll;
    cursor: auto;
}

#svgroot {
    -moz-user-select: none;
    -webkit-user-select: none;
    position: absolute;
    top: 0;
    left: 0;
}

#svgcanvas {
    line-height: normal;
    display: inline-block;
    background-color: #A0A0A0;
    text-align: center;
    vertical-align: middle;
    width: 640px;
    height: 480px;
    -apple-dashboard-region:dashboard-region(control rectangle 0px 0px 0px 0px); /* for widget regions that shouldn't react to dragging */
    position: relative;
    /*background: -moz-radial-gradient(45deg,#bbb,#222);
    background: -webkit-gradient(radial, center center, 3, center center, 1000, from(#bbb), to(#222));*/
}

svgtest.js

var initSVGPanel = function(container)
{
    var svgns = 'http://www.w3.org/2000/svg',
        xlinkns = 'http://www.w3.org/1999/xlink';

    var svgdoc = container.ownerDocument;

    var svgroot = svgdoc.createElementNS(svgns, 'svg');
    svgroot.setAttribute('id', 'svgroot');
    svgroot.setAttribute('xmlns', svgns);
    svgroot.setAttribute('xlinkns', xlinkns);
    svgroot.setAttribute('width', 640);
    svgroot.setAttribute('height', 480);
    svgroot.setAttribute('x', 0);
    svgroot.setAttribute('y', 0);
    svgroot.setAttribute('overflow', 'visible');
    container.appendChild(svgroot);

    var canvasbg = svgdoc.createElementNS(svgns, 'svg');
    canvasbg.setAttribute('id', 'canvasBackground');
    canvasbg.setAttribute('overflow', 'none');
    canvasbg.setAttribute('width', 640);
    canvasbg.setAttribute('height', 480);
    canvasbg.setAttribute('x', 640);
    canvasbg.setAttribute('y', 480);
    svgroot.appendChild(canvasbg);

    var canvasbgrect = svgdoc.createElement('rect');
    canvasbgrect.setAttribute('width', '100%');
    canvasbgrect.setAttribute('height', '100%');
    canvasbgrect.setAttribute('x', 0);
    canvasbgrect.setAttribute('y', 0);
    canvasbgrect.setAttribute('stroke', '#000');
    canvasbgrect.setAttribute('fill', '#FFF');
    canvasbg.appendChild(canvasbgrect);

    var svgcontent = svgdoc.createElementNS(svgns, "svg");
    svgcontent.setAttribute('id', 'svgcontent');
    svgcontent.setAttribute('width', 640);
    svgcontent.setAttribute('height', 480);
    svgcontent.setAttribute('x', 640);
    svgcontent.setAttribute('y', 480);
    svgcontent.setAttribute('overflow', 'visible');
    svgroot.appendChild(svgcontent);

    var testCircle = svgdoc.createElement('circle');
    testCircle.setAttribute('cx', 320);
    testCircle.setAttribute('cy', 240);
    testCircle.setAttribute('r', 100);
    testCircle.setAttribute('stroke', '#00F');
    testCircle.setAttribute('fill', '#0F0');
    svgcontent.appendChild(testCircle);

    container.style.width = 640*3;
    container.style.height = 480*3;

    svgroot.setAttribute('width', 640*3);
    svgroot.setAttribute('height', 480*3);
}

PS:

I tested this code on all modern browsers like Google Chrome, Mozilla Firefox, Safari, Internet Explorer(all the latest versions).

Also, I found that if I select Edit as HTML on Inspector, and change something, it appears with specified width and height.

Upvotes: 0

Views: 1533

Answers (1)

Robert Longson
Robert Longson

Reputation: 124016

createElement cannot be used to create SVG elements. You do it right when you create <svg> elements but wrong when you try to create <rect> or <circle> elements.

You want

var canvasbgrect = svgdoc.createElementNS(svgns, 'rect');

and

var testCircle = svgdoc.createElementNS(svgns, 'circle');

Upvotes: 3

Related Questions