SVG使用USE标签无法渲染

Question

DOM已经包括一个空的SVG标签（svg）。当我尝试动态附加一个具有ID（iconId）的现有SVG符号（symbol）的USE标记时：

svg.empty();
svg[0].setAttribute('viewBox', symbol.getAttribute('viewBox'));
svg.append('<use xlink:href="#' + iconId + '"></use>');

现在它不能渲染SVG了。在Chrome中，如果我添加以下内容，则可以渲染：

 element.html(element.html());

或者手动操作viewBox属性，但这不是一个真正的解决方案，而且IE根本不喜欢它。 值得一提的是，如果我直接添加SVG图形，则元素会呈现。

这里发生了什么，为什么在附加USE标记后SVG没有绘制？

- Chen Eshchar

---

我只能猜测：是不是使用标签在 SVG 加载之前就被渲染了？（不是在它被包含之前，而是实际加载之前） - DoXicK

大概地说，append将数据附加到HTML命名空间而不是SVG命名空间。 - Robert Longson

@DoXicK - 不，SVG和symbol都是硬编码在页面中的。脚本在DOMContentLoaded之后运行。 - Chen Eshchar

@RobertLongson - 你能提供一个解决方案吗？我也尝试了innerHTML。 - Chen Eshchar

当文档被完全加载和解析时，将触发DOMContentLoaded事件，无需等待样式表、图像，这意味着SVG可能尚未加载。它可能被请求但尚未下载。除非当然您已经将其内联化。 - DoXicK

Answer 1

毕竟这确实是命名空间的问题。

具体来说，SVG元素和属性必须使用document.createElementNS和node.setAttributeNS进行创建和设置。

$(document).ready(function(evt) { 
  var svgns = 'http://www.w3.org/2000/svg',
      xlinkns = 'http://www.w3.org/1999/xlink',
      use = document.createElementNS(svgns, 'use');
  
  use.setAttributeNS(xlinkns, 'xlink:href', '#save');
  document.getElementById('useSVG').appendChild(use);
});

#svgStore { 
  display: none;  
}

#useSVG {
  width: 16px;
  height: 16px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<svg style="display:none;" id="svgStore" style="display: none;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <symbol viewBox="0 0 16 16" id="save"><title>save</title>       <g id="svgstore3748a955346b4a088bbdc55a22f56504_x31_6_13_"> 
        <path style="fill-rule:evenodd;clip-rule:evenodd;" d="M9,4h2V2H9V4z M13,13H3v1h10V13z M13,11H3v1h10V11z M13,0H0v16h16V3L13,0z
   M3,1h9v4H3V1z M14,15H2V8h12V15z M13,9H3v1h10V9z">
     
   </path> 
      </g> 
    </symbol>
</svg>
SVG use:
<svg id="useSVG" xmlns="http://www.w3.org/2000/svg"></svg>

感谢@RobertLongson和http://www.kevlindev.com/tutorials/basics/shapes/js_dom/提供的答案指导。

- Chen Eshchar