想象一下以下 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="...">, or in <image xlink:href="..."/>在另一个 SVG 中，将不会显示 foo.png。使用最新的 Firefox 和 Chrome 进行测试，均使用 file:// 和 http://。两个浏览器的控制台中都没有任何内容，并且网络监视器显示没有尝试加载位图。
我错过了什么吗？我知道如果我将 foo.png 嵌入为“data:image/svg+xml;base64,...”，一切都会好起来的，但我真的想避免这种情况。我尝试包含的位图可能相当大，因此我更喜欢链接而不是嵌入。
出于安全原因，浏览器禁用了此功能。
From MDN https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_as_an_Image,
限制
出于安全目的，Gecko 对 SVG 内容设置了一些限制
当它被用作图像时：
- JavaScript 被禁用。
- 外部资源（例如图像、样式表）无法加载，但如果通过 BlobBuilder 对象 URL 内联则可以使用它们或
数据：URI。
- :visited-link 样式不会呈现。
- 平台本机小部件样式（基于操作系统主题）已禁用。
另外，请查看详细信息Bugzilla@Mozilla https://bugzilla.mozilla.org/show_bug.cgi?id=628747
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
