SVG中的链接图像 [英] Linked images inside SVG

问题描述

想象一下以下SVG：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <image xlink:href="foo.png" x="0" y="0" width="100" height="100"/>
</svg>

图像foo.png位于同一目录中。如果我们在浏览器中打开此SVG，它将正确显示foo.png。但是，如果我们尝试在< img src =...> 中使用此SVG，或者在< image xlink：href = .../> 在另一个SVG中，将不会显示foo.png。使用file：//和http：//测试最新的Firefox和Chrome。任何一个浏览器的控制台都没有，网络监视器也没有显示加载位图的尝试。

The image, foo.png, resides in the same directory. If we open this SVG in the browser, it will display foo.png correctly. But if we try to use this SVG in <img src="...">, or in <image xlink:href="..."/> inside another SVG, there will be no foo.png displayed. Tested with latest Firefox and Chrome, both with file:// and http://. There is nothing in the console of either browser, and network monitor shows no attempts to load a bitmap.

我错过了什么吗？我知道如果我将foo.png嵌入data：image / svg + xml; base64，...，一切都会好的，但我真的想避免这种情况。我试图包含的位图可能相当庞大，所以我最好更喜欢链接而不是嵌入。

Am I missing something? I know everything will be OK if I embed foo.png as "data:image/svg+xml;base64,...", but I really want to avoid that. Bitmaps I'm trying to include can be rather huge, so I would better prefer linking instead of embedding.

推荐答案

这是禁用的由浏览器出于安全原因。

This is disabled by the browser for security reasons.

来自 MDN ，

限制

Restrictions

出于安全考虑，Gecko当它被用作图像时对SVG内容
设置一些限制：

For security purposes, Gecko places some restrictions on SVG content when it's being used as an image:

• 禁用JavaScript。


• 无法加载外部资源（例如图像，样式表），但如果通过BlobBuilder对象URL或
  数据：URI进行内联，则可以使用它们。


• ：不呈现访问链接样式。


• 禁用平台本机窗口小部件样式（基于操作系统主题）。

• JavaScript is disabled.
• External resources (e.g. images, stylesheets) cannot be loaded, though they can be used if inlined through BlobBuilder object URLs or data: URIs.
• :visited-link styles aren't rendered.
• Platform-native widget styling (based on OS theme) is disabled.

另外，请查看 Bugzilla @ Mozilla

这篇关于SVG中的链接图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！