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

Posted 2023-03-06

【中文标题】带有内部图像的 Svg 未在 Safari 中显示

【英文标题】：Svg with image inside is not showing in safari

【发布时间】：2014-01-03 18:56:33

【问题描述】：

在我的网站中，我嵌入了一些 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 的 aprt。

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"
       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"   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）中显示，但图像丢失（我只能看到边框）。

【问题讨论】：

Safari 与 Chrome 的比较：Safari 在 </image></g>></g> 之后关闭 </clipPath> ！？

感谢您的评论，但这仍然不能解决我的问题。而且，当我在 Safari 中检查元素时，仅打开 svg 时，我无法确认您的评论是否属实。我觉得没问题。

很可能 b.由于这种差异，您的输出错误。在 Web Inspector 资源选项卡中打开源代码会显示元素 </clipPath> 它应该在的位置。打开 DOM 元素 </clipPath> 位于错误的位置。至少在我的 Safari 版本中。

你试过回答这个问题吗Clipping path in SVG not working in Safari

感谢您指出。我尝试过使用多边形切换使用，但仍然没有成功。当它在 dom 内部时，图像不显示。

【参考方案1】：

似乎这个问题的答案有效：What could make Safari skip 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"
       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"   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>

【讨论】：

谢谢，但这对我不起作用。我也认为这是一个有点奇怪的解决方案，因为你定义了同一个多边形两次。如果其他人偶然发现这一点，我将发布对我有用的内容。不过感谢您的努力。

【参考方案2】：

所以 Anto Jurković 指出，Safari 和 clipPath 存在一些已知问题。 Safari 喜欢的是，如果您不定义多边形，而是将其直接放入 clippPath。此外，您还必须分别对 clipPath 进行分组。

但如果我使用 svg 的 img 标签 - <img src="svg"/>，我仍然无法让 svg 呈现图像。所以最后我像这样嵌入它：

<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"
       viewBox="0 0 328 328" enable-background="new 0 0 328 328" xml:space="preserve">
<g>
    <clipPath id="SVGID_2_">
        <polygon id="SVGID_1_" points="1.414,164.001 164,326.586 326.586,164.001 164,1.414      "/>
    </clipPath>
</g>
<image clip-path="url(#SVGID_2_)" overflow="visible"   id="DSC_x5F_0112-2" xlink:href="data:image/jpeg;base64,/9j/.....r/fdeaS//9k=">
</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>

我可以确认这在移动 safari 中正确呈现（在 ipad 和 iphone、windows safari 和 mac safari - 最新版本上）。

所以总结一下...我在单独的 html 文件中保存了这个 svg，并在需要时渲染它们。

【参考方案3】：

This solution 在 Safari 中显示嵌入的 SVG 图像时为我工作。

替换

<img src="image.svg">

与

<object data="image.svg" type="image/svg+xml"></object>

【讨论】：

可以，但是您将无法将 css 类应用于 svg 并使用普通样式表对其进行样式设置。您必须像这样在 svg 中嵌入外部样式表： 或具有内联样式。

【参考方案4】：

我在使用 Ajax 将 svg spritesheet 加载到页面上时遇到了这个问题。如果在加载 spritesheet 之前我在页面上有一个，它将失败并且一旦 spritesheet 可用就不会解决。加载 spritesheet 后添加到 dom 中的任何内容都可以。我不得不推迟将项目放入 dom 直到 spritesheet 完成加载。

这只影响了 ios。所有其他浏览器都不关心顺序。

【参考方案5】：

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

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

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

这种方法的优点是图像仍然使用img标签显示，因此可以应用解决方法（并在最终修补浏览器时干净地删除）而不影响应用程序/网站的其余部分.

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

【讨论】：

我刚刚遇到这个问题，两年后它说底层错误已得到修复。我错过了什么吗？

我感觉这个问题仍然存在于页面加载后加载的 html，例如通过ajax。这是我目前的经验。