SVG與使用無標籤不渲染

DOM中已經包含空SVG標籤（「SVG」），當我試圖將現有的SVG符號（「符號」）的使用標籤dinamically追加一個ID（「iconId」）：SVG與使用無標籤不渲染

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

來源

2014-09-22 Chen Eshchar

我只能猜測，但：它可能是使用標記呈現之前，svg加載？（不包括它之前，但實際加載） – DoXicK 2014-09-22 13:44:43

可能附加將數據粘在html命名空間而不是SVG命名空間。 – 2014-09-22 13:46:39

@DoXicK - 不，SVG和符號都在頁面中硬編碼。腳本在DOMContentLoaded之後運行。 – 2014-09-22 13:51:37

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

具體而言，必須使用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 
 
\t \t M3,1h9v4H3V1z M14,15H2V8h12V15z M13,9H3v1h10V9z"> 
 
\t \t  
 
\t \t </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/指導答案。

來源

2014-09-23 07:48:57

SVG與使用無標籤不渲染

回答

相關問題