JS动态生成SVG对象动态设置use和属性

需求：

JS动态生成SVG对象，然后动态生成use子元素并设置xlink:href属性；然后appendChild到页面DOM；

这是我在使用svg制作icon图标的时候遇到的问题，就是symbol 然后svg use引用，方便制作icon；

通用方法：

直接外围一个div, 然后

div.innerHTML = '<svg class="icon"><use xlink:href="#'+name+'"></use></svg>'

这样是可以的，但是这不是本文的重点，本文重点是JS动态生成对象并插入。

动态生成：

const ns = 'http://www.w3.org/2000/svg'; // 元素命名空间
const childNS = 'http://www.w3.org/1999/xlink'; // xlink命名空间

// ---------------------------------------------------------------

// 创建svg对象，注意用 createElementNS
const svg = document.createElementNS(ns, 'svg');

// 设置svg对象的class
svg.setAttribute('class', 'icon');

// ---------------------------------------------------------------

// 创建use子对象
const child = document.createElementNS(ns, 'use');

// 设置xlink:href属性，注意用 setAttributeNS
child.setAttributeNS(childNS, 'xlink:href', '#'+name);

// ---------------------------------------------------------------

// 附加子对象到svg
svg.appendChild(child);

// ---------------------------------------------------------------
// 附加到body显示
document.body.appendChild(svg);