Svg内部没有显示图像

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

基于前人的类似题目我已经试过如下：

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文件（只是文件），它将被正确渲染。此外，它在浏览器中作为文件打开后，也会在页面内呈现。我用img标签将svg嵌入到页面中。

<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），但图像丢失（我可以看到只是边框）。

来源

2013-12-16 SuperMan

Safari与Chrome比较：Safari在>之后放入'''！ –

感谢您的评论，但这仍然无法解决我的问题。另外，当我在Safari中检查元素时，只需打开svg，我无法确认您的评论是否正确。它对我来说很好。 – SuperMan

最有可能b。因为这种差异，你有错误的输出。在Web Inspector资源选项卡中打开源代码，它应该显示元素“”。打开DOM元素''是在错误的地方。至少在我的Safari版本中。 –

看来这个问题的答案有效：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>

来源

2013-12-16 17:54:09

谢谢，但这不适合我。另外我觉得有点奇怪的解决方案，因为你定义了两次相同的多边形。如果其他人绊倒在这里，我会发布对我有用的东西。谢谢你的努力。 – SuperMan

所以安托Jurković指出，有与Safari和clipPath一些已知问题。 Safari喜欢的是如果你不定义多边形，但直接将其放入clippPath。此外，您必须单独将clipPath分组。

但是我仍然无法使用svg来呈现图像，如果我使用img标记svg - <img src="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>

我可以证实，这使它在正确的移动Safari浏览器（iPad和iPhone上，窗户Safari和MAC野生动物园 - 最新版本）。

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

来源

2013-12-17 23:13:47 SuperMan

This solution适用于在Safari中显示嵌入式SVG图像时使用。

与

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

来源

2015-05-29 03:46:19 NameGame

我就遇到了这个问题，我在那里使用Ajax加载SVG spritesheet到页面替换

<img src="image.svg">

。如果我在加载spritesheet之前在页面上有一个，它将会失败并且一旦spritesheet可用就不会解析。在spritesheet加载后添加到dom的任何内容都很好。我不得不延迟将这些物品放在dom中，直到spritesheet完成加载之后。

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

来源

2015-07-21 14:10:31 GeekyMonkey

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

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

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

此方法的优点是仍然使用img标签显示图像，以便解决方法可以应用（并在稍后修补浏览器时最终完全删除），而不会影响应用程序/网站的其余部分。

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

来源

2015-11-25 15:32:27 Greg

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

我有一种感觉，这个问题仍然是页面加载后加载的html。通过ajax。无论如何，这是我目前的经验。 –

Svg内部没有显示图像

回答

相关问题