Question

我正在通过javascript构建基于Web的SVG编辑程序。在此期间，我面临着非常奇怪的问题。我制作了SVG元素并将其附加到另一个SVG元素中。但是嵌套的SVG元素总是具有0px * 0px的大小。我确认它在Inspector上具有正确的宽度和高度属性值，但它显示为零大小。

这是我的整个代码。

的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：

我在所有现代浏览器上测试了此代码，例如Google Chrome，Mozilla Firefox，Safari，Internet Explorer（所有最新版本）。

此外，我发现如果我在Inspector上选择Edit as HTML并更改某些内容，则会显示指定的宽度和高度。

Answer 1

createElement不能用于创建SVG元素。您在创建<svg>元素时执行此操作，但在尝试创建<rect>或<circle>元素时出错。

你想要

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

和

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

嵌套在另一个SVG元素中的SVG元素的大小为0px * 0px

1 个答案: