内部图像的Svg没有在safari中显示

Question

在我的网站内,我正在嵌入一些svgs.它们似乎在Chrome,Firefox,IE(9+)和Safari中都运行良好.一旦svg中包含图像,safari就不会渲染图像.

基于之前的类似主题,我尝试了以下内容:

SVG <image>元素不在Safari中显示 - 封闭

 <use>

像这样的标签 <use></use>

SVG图像不会出现在Safari中 - 我没有发现这非常有用,因为这是删除svg的aprt.

无法在Safari中渲染SVG图像 - 已添加

<meta http-equiv="Content-Type" content="application/xhtml+xml"> 在标题中.

除此之外,我真的不知道还有什么可以尝试.也许还有一点需要注意的是,在我的页面中,图像没有显示,但我可以在safari中打开svg文件(只是文件),它将被正确渲染.此外,在浏览器中将其作为文件打开后,它也会在页面内部呈现.我将svg嵌入到带有img标签的页面中.

<img src="mysvg.svg" class="center-block"/>

这是我的svg:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<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="328px" height="328px" viewBox="0 0 328 328" enable-background="new 0 0 328 328" xml:space="preserve">
<g>
    <defs>
        <polygon id="SVGID_1_" points="1.414,164.001 164,326.586 326.586,164.001 164,1.414      "/>
    </defs>
    <clipPath id="SVGID_2_">
        <use xlink:href="#SVGID_1_"  overflow="visible"></use>
    </clipPath>
    <g id="DSC_x5F_0112-2.psd" clip-path="url(#SVGID_2_)">
        <g id="DSC_x5F_0112-2.psd_1_" enable-background="new    ">

                <image overflow="visible" width="338" height="532" id="DSC_x5F_0112-2" xlink:href="data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAABkAAD/4QNhaHR0cDov
.....SLKPF+7j+acOZPZjmsw4Q0f0L/6k1fu3WFvY/wDEB5o0d7H7/wD7SPFgPzVE54J9/wBI/qez5vei
r/fdeaS//9k=" transform="matrix(0.9818 0 0 0.9818 -2.7197 -11.064)">
            </image>
        </g>
    </g>
</g>
<g>
    <path fill="#FFFFFF" d="M164,328.001L0,164.002L164,0.001l164,164.001L164,328.001z M1.414,164.002L164,326.587l162.586-162.585
        L164,1.415L1.414,164.002z"/>
</g>
</svg>

我减少了base64图像字符串,以缩短代码.全svg可以在这里找到.

更新:为了清楚,svg在浏览器中显示(safari)但图像丢失(我只能看到边框).

Answer 1

看来这个问题的答案是有效的：What might make Safariskip Clip-path AND mask with SVG? 。请参阅答案链接中的说明。

您必须重新创建剪辑路径才能使其可见。并且</clippath>标签不会在</image>标签之后推送。

这是稍微改变的代码（链接到我插入的图像，因此您必须更改它）：

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<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="328px" height="328px" viewBox="0 0 328 328" enable-background="new 0 0 328 328" xml:space="preserve" >
<g>
    <clipPath id="SVGID_2_">
        <!--use xlink:href="#SVGID_1_"  overflow="visible"></use-->
        <polygon id="SVGID_1_" points="1.414,164.001 164,326.586 326.586,164.001 164,1.414" />
    </clipPath>

    <defs>
        <polygon id="SVGID_1_" points="1.414,164.001 164,326.586 326.586,164.001 164,1.414"/>
    </defs>
</g>

<image clip-path='url(#SVGID_2_)' overflow="visible" width="338" height="532" id="DSC_x5F_0112-2" xlink:href="images/banner_03.jpg" transform="matrix(0.9818 0 0 0.9818 -2.7197 -11.064)">
</image>

<g>
    <path fill="#FFFFFF"  d="M164,328.001L0,164.002L164,0.001l164,164.001L164,328.001z M1.414,164.002L164,326.587l162.586-162.585
        L164,1.415L1.414,164.002z"/>
</g>
</svg>