html - 带有内部图像的 Svg 未在 Safari 中显示

Question

在我的网站中，我嵌入了一些 svg。它们在 Chrome、Firefox、IE(9+) 和 Safari 中似乎都工作得很好。然而，一旦 svg 中包含图像，safari 就不会渲染图像。

基于之前的类似主题，我尝试了以下方法:

SVG <image> elements not displaying in Safari - 封闭

 <use>

像这样标记<use></use>

SVG Image dosen't appear in Safari - 我觉得这不是很有用，因为这是删除 svg 的一部分。

Not able to render SVG image in Safari - 添加

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

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

Answer 1

看起来这个 WebKit 错误是造成问题的原因:https://bugs.webkit.org/show_bug.cgi?id=99677

我们在应用程序中使用的解决方法是使用一个脚本来查找所有 img元素显示 SVG 图像并添加隐藏 object加载相同 SVG 的元素 ( <object style="position: fixed; width: 0; height: 0;" data="image.svg" type="image/svg+xml"></object> )。

它起作用的原因是 object标记正确地将嵌入图像加载到图像缓存中，以便它们在使用 img 加载的 SVG 中可见。标签。

这种方法的优点是图像仍然使用 img 显示。标记，以便在不影响应用程序/网站的其余部分的情况下应用解决方法(并在浏览器最终打补丁时彻底删除)。

缺点是创建了一个额外的 object每个 SVG 图像的标记。