透過JS 建立動態 SVG (ex:圖形Circle)

一般要透過 CreateElement 或 HTML append、InnerHTML 動態加入 SVG 內容會產生問題 (SVG 是 xmlns ，而非 HTML 元素)，以下使用 createElementNS 進行轉換後就行了，趕快做個記錄吧..

HTML:

<svg id="s"xmlns="http://www.w3.org/2000/svg"/>

JS:

function makeSVG(tag, attrs){

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

for (var k in attrs)

el.setAttribute(k, attrs[k]);

return el;

}

var circle= makeSVG('circle', {cx: 100, cy: 50, r:40, stroke: 'black', 'stroke-width': 2, fill: 'yellow'});

          document.getElementById('s').appendChild(circle);