带有USE标记的SVG无法呈现

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了带有USE标记的SVG无法呈现相关的知识,希望对你有一定的参考价值。

DOM已经包含一个空的SVG标记(svg)。当我尝试使用id(USE)动态附加现有SVG符号(symbol)的iconId标记时:

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绘图?

答案

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

具体而言,必须使用document.createElementNSnode.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>

以上是关于带有USE标记的SVG无法呈现的主要内容,如果未能解决你的问题,请参考以下文章

SVG使用标记不渲染渐变Firefox

带有边距和页面转换器的片段内的 ViewPager 无法正确呈现

带有dataURL href的图像的SVG在某些引擎中无法正确呈现

Snap.svg 未能为 <use> 标记元素进行 .transform()

SVG USE 元素和 :hover 样式

Wagtail - 在页面上呈现带有相关片段和标签的数据时遇到问题