Question

在我的网站中，我正在嵌入一些svgs。它们似乎在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 - 已添加</ p> 标题中的

<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

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

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

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

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

Answer 2

在Safari中显示嵌入式SVG图像时，

This solution适用于我。

替换

<img src="image.svg">

与

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

Answer 3

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

Answer 4

所以AntoJurković指出，Safari和clipPath存在一些已知问题。 Safari喜欢的是如果你不定义多边形，而是直接将它放入clippPath。此外，您必须单独分组clipPath。

但如果我使用img tag for svg - <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"
     width="328px" height="328px" 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" width="338" height="532" 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>

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

总而言之......我将这个svgs放在单独的html文件中并在需要时渲染它们。

Answer 5

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

这只会影响IOS。所有其他浏览器都不关心订单。

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

5 个答案: