帶有USE標記的SVG無法呈現

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繪圖？

Answer 1

畢竟它確實是命名空間的問題。

具體而言，必須使用document.createElementNS和node.setAttributeNS創建和設置SVG元素和屬性。

 $(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/指導答案。