Safari中未显示SVG <image>元素

Question

我在一个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）中无法正常显示。你知道这是为什么吗？

- inorganik

---

如果您发布实际的完整SVG代码，那么帮助您将变得更加容易。 - WebChemist

@WebChemist，这是给你的。 - inorganik

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

- inorganik

---

哇，谢谢你。Safari在显示一些内联SVG（即在HTML页面中）时出现问题，但只有当我单独打开SVG时才会出现问题。 - fregante

请记住，SVG是XML格式，因此需要闭合<use>标签。Safari可能不支持使用<use/>的方式进行闭合，但您可以使用<use></use>以确保文档在任何地方都有效并正常工作。 - fregante