svg使用symbol引入 静态直接use可以显示 js操作dom添加use标签xlink:href不起作用

svg使用symbol引入 静态直接use可以显示 js操作dom添加use标签xlink:href不起作用

使用fonticon时 直接<svg class="icon" aria-hidden="true"> <use xlink:href="#icon-xxx"></use> </svg>可以显示图片

js动态添加svg标签无法显示图片

两个问题:

1.svg基于xml 在html中使用需要指明namespace

2.查阅mdn文档(:href)发现SVG 2 removed the need for the xlink namespace, so instead of xlink:href you should use href.

            // 创建svg use需要指明命名空间let icon = ateElementNS("","svg");icon.setAttribute("xmlns", "");icon.setAttribute("class", "icon");icon.setAttribute("aria-hidden", "true");icon.setAttribute("fill", "currentColor");//use元素let use = ateElementNS("","use");// xlink:href替换为href成功显示图标use.setAttribute("href", "#icon-xxx");icon.appendChild(use);