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与使用无标签不渲染

回答

相关问题