SVG 中的链接图像答案

【问题标题】：Linked images inside SVGSVG 中的链接图像
【发布时间】：2013-07-15 22:11:55
【问题描述】：

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

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

【问题讨论】：

Can an SVG included in HTML with an "img" tag have a link to an external image with the "image" tag? 的可能重复项
你可以改用<object data="image.svg" type="image/svg+xml"/>

标签： html svg

【解决方案1】：

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

来自MDN，

限制

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

JavaScript 被禁用。

无法加载外部资源（例如图像、样式表），但如果通过 BlobBuilder 对象 URL 或数据：URI。

：未呈现已访问链接样式。

平台原生小部件样式（基于操作系统主题）已禁用。

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

【讨论】：