6

想象一下以下 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。但是如果我们尝试在 SVG 中<img src="...">或在<image xlink:href="..."/>另一个 SVG 中使用这个 SVG，将不会显示 foo.png。使用最新的 Firefox 和 Chrome 进行测试，包括 file:// 和 http://。两种浏览器的控制台中都没有任何内容，并且网络监视器显示没有尝试加载位图。

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

4

1 回答 1

12

出于安全原因，浏览器禁用了此功能。

来自MDN，

限制

出于安全考虑，Gecko 在将 SVG 内容用作图像时对其设置了一些限制：

  • JavaScript 被禁用。
  • 无法加载外部资源（例如图像、样式表），但如果通过 BlobBuilder 对象 URL 或 data: URI 内联，则可以使用它们。
  • :visited-link 样式不会被渲染。
  • 平台原生小部件样式（基于 OS 主题）已禁用。

另外，请在Bugzilla@Mozilla查看详细信息

于 2013-07-15T14:11:55.323 回答