带有图像的Svg在Safari中不显示 [英] Svg with image inside is not showing in safari

问题描述

在我的网站内部，我嵌入了几个SVG。在Chrome，Firefox，IE（9+）和Safari中，它们似乎都可以正常工作。只要有图像包含在SVG中，Safari就不会渲染图像。

基于以前的类似主题，我尝试了以下内容：

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

 < use> 
  

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

SVG图片dosen't出现在Safari - 我不觉得这非常有用，因为这是删除svg的aprt。

不是能够在Safari中呈现SVG图像 - 已添加<​​b>

< meta http-equiv =Content-Typecontent =application / xhtml + xml> 标题中。

除此之外，我真的不知道还有什么可以尝试的。也许有一件更有趣的事情要注意的是，在我的页面中，图像不显示，但我可以在safari中打开svg文件（只是文件），它将被正确渲染。此外，它在浏览器中作为文件打开后，也会在页面内呈现。我用img标签将svg嵌入到页面中。

 < img src =mysvg.svgclass =center-block/> 
  

这是我的svg：

 <？xml version =1.0encoding =utf-8？> 
<！ - 生成器：Adobe Illustrator 15.1.0，SVG导出插件。 SVG版本：6.00 Build 0） - > 
<！DOCTYPE svg PUBLIC -  // W3C // DTD SVG 1.1 // ENhttp://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\"> 
< svg version =1.1id =Layer_1xmlns =http://www.w3.org/2000/svgxmlns：xlink =http://www.w3.org/1999 / xlinkx =0pxy =0px
 width =328pxheight =328pxviewBox =0 0 328 328enable-background =new 0 0 328 328xml：space = 保存 > 
< 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.psdclip-path =url（＃SVGID_2 _）> 
< g id =DSC_x5F_0112-2.psd_1_enable-background =new> 
 
  ..... 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> 
  L164,1.415 L1.414,164.002z/> 
< / g> 
< / svg> 
  

我减少了base64图像字符串，以缩短代码。完整的SVG可以在这里找到 。

更新：只需要清楚，svg在浏览器（Safari）中显示，但图像缺失（我可以看到边框）。

解决方案

看起来像这个WebKit错误是对这个问题负责： https://bugs.webkit.org/show_bug.cgi?id=99677

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



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

这个优点方法是图像仍然显示给我们 img 标记，以便解决方法可以应用（并且稍后在浏览器最终打补丁时被彻底删除），而不会影响应用程序/网站的其余部分。

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

Inside my website, I am embeding a few svgs. They all seem to work just fine in Chrome, Firefox, IE(9+) and in Safari. Howvere as soon as there is image included in the svg, safari does not render the image.

Based on the previous similar topic I have tried the following:

SVG <image> elements not displaying in Safari - enclosing

 <use>

tag like this <use></use>

SVG Image dosen't appear in Safari - I dont find this very usefull,cause this is deleting aprt of the svg.

Not able to render SVG image in Safari - Added

<meta http-equiv="Content-Type" content="application/xhtml+xml"> in header.

And beyond that, I dont really know what else to try. Maybe one more interesting thing to note is that inside my page, image is not displayed, but I can open svg file in safari(just the file) and it will be renderd correctly. Further more, after it's opened in the browser as a file, it renders inside the page as well. And I embed the svg to the page with img tag.

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

This is my 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>

I have reduced base64 image string, to shorten the code. Full svg can be found here.

UPDATE: Just to be clear, svg shows in the browser(safari) but image is missing (I can see just border).

解决方案

It looks like this WebKit bug is responsible for the problem: https://bugs.webkit.org/show_bug.cgi?id=99677

The workaround we use in our application is to have a script which finds all img elements displaying SVG images and add hidden object elements loading the same SVGs (<object style="position: fixed; width: 0; height: 0;" data="image.svg" type="image/svg+xml"></object>).

The reason it works is that the object tag properly loads the embedded images into the image cache, so that they are visible within the SVGs loaded using the img tags.

The advantage of this approach is that the images are still displayed using the img tag, so that the workaround can be applied (and later removed cleanly when the browsers are eventually patched) without affecting the rest of the application/website.

The disadvantage is the creation of an extra object tag for each SVG image.

这篇关于带有图像的Svg在Safari中不显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！