html – 带有USE标记的SVG无法呈现

概述DOM已经包含一个空的SVG标记(svg).当我尝试动态附加具有id(iconId)的现有SVG符号(符号)的USE标记时： svg.empty();svg[0].setAttribute('viewBox', symbol.getAttribute('viewBox'));svg.append('<use xlink:href="#' + iconId + '"></use>'); 它不再呈 DOM已经包含一个空的SVG标记(svg).当我尝试动态附加具有ID(iconID)的现有SVG符号(符号)的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绘图？

解决方法 毕竟它确实是命名空间的问题.

具体而言,必须使用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  ID="svgStore"  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  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/指导答案.

总结

以上是内存溢出为你收集整理的html – 带有USE标记的SVG无法呈现全部内容，希望文章能够帮你解决html – 带有USE标记的SVG无法呈现所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。