使用`Document.createElementNS`

Question

我正在使用JavaScript绘制一些内嵌SVG。主要是路径，虽然我也尝试过多边形。我设法使用路径（在此简化示例中为一个）填充<svg>标记，这是正确的SVG。我知道这是因为：

当svg标记的内容被复制到文件中并在Inkscape中打开时，生成的图片就像预期的一样。
如果我以某种方式更改Firefox的Inspector中的<path>，例如删除</path>结束标记（这只会导致Firefox按照原来的方式修复代码），那个特定的路径将显示，但其余的仍然不会。
当我在javascript运行后复制页面中的所有html，并将其放入新的html文件中时，svg会正确显示。

我最初在Firefox中遇到过这个问题，但也确认svg创建在Edge中也不起作用。

那么如何在创建内联svg渲染后立即进行渲染？

编辑：与此不一样：JavaScript and SVG: Error on createElement()。这个问题与SVG文档有关，而不是HTML。此外，我根本没有收到错误消息。

<html>

<head></head>

<body>

  <svg id="drawing"></svg>

  <script>
    function creel(tagname, id, cla, attrs) {
      var n = document.createElement(tagname);
      if (id) {
        n.id = id;
      }
      if (cla) {
        n.className = cla;
      }
      if (attrs) {
        for (var i = 0; i < attrs.length; i = i + 2) {
          n.setAttribute(attrs[i], attrs[i + 1]);
        }
      }
      return n;
    }

    function drawline(c, ax, ay, bx, by, style) {
      // Method for svg
      var d = "M" + ax + "," + ay + " L" + bx + "," + by;
      var p = creel("path", "", "", ["d", d]);
      if (style) {
        p.setAttribute("style", style);
      } else {
        p.setAttribute("style", "stroke:#555555;stroke-width:2; fill:none;");
      }
      c.appendChild(p);
    }

    function drawit() {
      var c = document.getElementById("drawing");
      c.setAttribute("width", 500);
      c.setAttribute("height", 500);
      c.setAttribute("viewBox", "0 0 500 500");
      c.setAttribute("xmlns", "http://www.w3.org/2000/svg");
      c.setAttribute("style", "border-style:solid;border-width:1px;background:#eeeeee;");

      var thinstyle = "stroke:#555555;stroke-width:2; fill:none;";

      drawline(c, 10, 10, 400, 400, thinstyle);
    }



    window.onload = function() {
      drawit();
    }
  </script>
</body>

</html>

Answer 1

使用`Document.createElementNS`

创建SVG元素

直接从JavaScript创建时，您需要使用Document.createElementNS创建svg元素：

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

渲染路径的示例：

＆＃13;

function creel(tagname, id, cla, attrs) {
  // USE createElementNS HERE
  var n = document.createElementNS('http://www.w3.org/2000/svg', tagname);
  if (id) {
    n.id = id;
  }
  if (cla) {
    n.className = cla;
  }
  if (attrs) {
    for (var i = 0; i < attrs.length; i = i + 2) {
      n.setAttribute(attrs[i], attrs[i + 1]);
    }
  }
  return n;
}

function drawline(c, ax, ay, bx, by, style) {
  // Method for svg
  var d = "M" + ax + "," + ay + " L" + bx + "," + by;
  var p = creel("path", "", "", ["d", d]);
  if (style) {
    p.setAttribute("style", style);
  } else {
    p.setAttribute("style", "stroke:#555555;stroke-width:2; fill:none;");
  }
  c.appendChild(p);
}

function drawit() {
  var c = document.getElementById("drawing");
  c.setAttribute("width", 500);
  c.setAttribute("height", 500);
  c.setAttribute("viewBox", "0 0 500 500");
  c.setAttribute("xmlns", "http://www.w3.org/2000/svg");
  c.setAttribute("style", "border-style:solid;border-width:1px;background:#eeeeee;");

  var thinstyle = "stroke:#555555;stroke-width:2; fill:none;";

  drawline(c, 10, 10, 400, 400, thinstyle);
}

window.onload = function() {
  drawit();
}

＆＃13;

<svg id="drawing"></svg>

＆＃13;

另外，请记住，应该/需要使用setAttributeNS方法设置SVG元素的某些属性。应使用setAttributeNS设置的其中一个属性是xmlns。

JavaScript内联SVG无法呈现

1 个答案:

使用`Document.createElementNS`

JavaScript内联SVG无法呈现

1 个答案:

使用Document.createElementNS

使用`Document.createElementNS`