SVG <image> 元素未在 Safari 中显示答案

【问题标题】：SVG <image> elements not displaying in SafariSVG <image> 元素未在 Safari 中显示
【发布时间】：2013-06-25 14:57:46
【问题描述】：

我在 html5 文档中有一些内联 svg，如下所示：

<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) 中不显示。知道为什么会这样吗？

【问题讨论】：

如果您发布实际的完整 svg 代码会更容易提供帮助
@WebChemist 你去吧。

标签： html svg webkit

【解决方案1】：

原来 Safari 6.0 不喜欢 <use> 标签内的斜线。当我删除它时，一切正常。

    <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>

【讨论】：

哇。谢谢你。 Safari 没有显示一些内联 SVG（即在 HTML 页面内），但只有在我自己打开 SVG 时才显示。
请记住，SVG 是 XML，因此必须关闭 <use>。 Safari 可能不支持<use/>，但您可以使用<use></use> 保持文档有效并在任何地方工作。