创建元素

Created: November-22, 2018

理解创建和修改 SVG 元素的最简单方法是使用 DOM Level 2 Core 接口对元素进行操作，就像使用 HTML 或 XML 一样。

从 JavaScript 创建的元素必须在 SVG 元素中声明的相同名称空间中创建 - 在此示例中为“ http://www.w3.org/2000/svg ”。但是，几乎所有 SVG 元素的属性都不在任何名称空间中。你不能将它们放在 SVG 名称空间中。

这里我们演示了在 HTML 中托管的 SVG，因为这是一个常见的情况：

<!doctype HTML>
<html><title>Creating an Element</title>
<body>
  <svg xmlns="http://www.w3.org/2000/svg"
       width="100%" height="100%"
       viewBox="0 0 400 300"></svg>

  <script>
     var svgNS = "http://www.w3.org/2000/svg";

     // Create a circle element (not part of the DOM yet)
     var circle = document.createElementNS(svgNS,'circle'); // Creates a <circle/>
     circle.setAttribute('fill','red'); // Note: NOT setAttributeNS()
     circle.setAttribute('cx',150);     // setAttribute turns 150 into a string
     circle.setAttribute('cy','80');    // using a string works, too
     circle.setAttribute('r',35);       // give the circle a radius so we can see it

     // Now, add the circle to the SVG document so we can see it
     var svg = document.querySelector('svg'); // the root <svg> element
     svg.appendChild(circle);
  </script>
</body></html>

需要在特定命名空间中创建一些属性。它们是在 SVG 属性索引中以冒号列出的冒号。具体来说，它们是：xlink:actuate，xlink:arcrole，xlink:href，xlink:role，xlink:show，xlink:title，xlink:type，xml:base，xml:lang 和 xml:space。使用 setAttributeNS() 设置这些属性：

var svgNS   = "http://www.w3.org/2000/svg";
var xlinkNS = "http://www.w3.org/1999/xlink";
var img = document.createElementNS( svgNS, 'image' );
img.setAttributeNS( xlinkNS, 'href', 'my.png' );

如果你经常创建元素，特别是有许多属性，那么像下面这样的帮助函数可以节省你的输入，避免错误，并使你的代码更易于阅读：

<!doctype HTML>
<html><title>Creating an Element</title>
<body>
  <svg xmlns="http://www.w3.org/2000/svg"></svg>
  <script>
     var svg = document.querySelector('svg');
     var circle = createOn( svg, 'circle', {fill:'red', cx:150, cy:80, r:35} );

    // Create an SVG element on another node with a set of attributes.
    // Attributes with colons in the name (e.g. 'xlink:href') will automatically
    // find the appropriate namespace URI from the SVG element.
    // Optionally specify text to create as a child node, for example
    //   createOn(someGroup,'text',{x:100,'text-anchor':'middle'},"Hello World!");
    function createOn(parentEl,name,attrs,text){
      var doc=parentEl.ownerDocument, svg=parentEl;
      while (svg && svg.tagName!='svg') svg=svg.parentNode;
      var el = doc.createElementNS(svg.namespaceURI,name);
      for (var a in attrs){
        if (!attrs.hasOwnProperty(a)) continue;
        var p = a.split(':');
        if (p[1]) el.setAttributeNS(svg.getAttribute('xmlns:'+p[0]),p[1],attrs[a]);
        else      el.setAttribute(a,attrs[a]);
      }
      if (text) el.appendChild(doc.createTextNode(text));
      return parentEl.appendChild(el);
    }
  </script>
</body></html>