建立元素

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>