SVG< image>元素未在Safari中显示 [英] SVG <image> elements not displaying in Safari
本文介绍了SVG< image>元素未在Safari中显示的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在html5文档中有一些内嵌svg,如下所示:
I have some inline svg in an html5 doc, like so:
<div>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="96px" height="183px" viewBox="0 0 96 183" enable-background="new 0 0 96 183" xml:space="preserve">
<g>
<defs>
<path id="SVGID_4_" d="M48,5.684c-23.084,0-41.801,11.266-41.801,25.168v121.301c0,13.902,18.717,25.168,41.801,25.168
c23.084,0,41.797-11.266,41.797-25.168V30.852C89.797,16.949,71.084,5.684,48,5.684z"/>
</defs>
<clipPath id="SVGID_5_">
<use xlink:href="#SVGID_4_" overflow="visible"/>
</clipPath>
<image id="energy" clip-path="url(#SVGID_5)" xlink:href="_images/energy.png" width="82" height="189" x="7" y="178"/>
</g>
</svg>
</div>
这在Chrome和Firefox中完美显示,但在Safari(6.0.4)中却无法完美显示.知道为什么会这样吗?
This displays perfectly in Chrome and Firefox, but not Safari (6.0.4). Any idea why this could be?
推荐答案
事实证明Safari 6.0不喜欢<use>
标记内的斜杠.当我删除它时,一切工作正常.
Turns out Safari 6.0 doesn't like the closing slash inside the <use>
tag. When I removed it, everything worked perfectly.
<div>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="96px" height="183px" viewBox="0 0 96 183" enable-background="new 0 0 96 183" xml:space="preserve">
<g>
<defs>
<path id="SVGID_4_" d="M48,5.684c-23.084,0-41.801,11.266-41.801,25.168v121.301c0,13.902,18.717,25.168,41.801,25.168
c23.084,0,41.797-11.266,41.797-25.168V30.852C89.797,16.949,71.084,5.684,48,5.684z"/>
</defs>
<clipPath id="SVGID_5_">
<use xlink:href="#SVGID_4_" overflow="visible">
</clipPath>
<image id="energy" clip-path="url(#SVGID_5)" xlink:href="_images/energy.png" width="82" height="189" x="7" y="178"/>
</g>
</svg>
</div>
这篇关于SVG< image>元素未在Safari中显示的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文