想象一下以下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,或者在另一个SVG中的<image xlink:href="..."/>
中使用此SVG,则不会显示foo.png。使用file://和http://测试最新的Firefox和Chrome。两个浏览器的控制台中都没有任何内容,网络监视器也没有显示加载位图的尝试。
我错过了什么吗?我知道如果我将foo.png嵌入&#34; data:image / svg + xml; base64,...&#34;,一切都会好的,但我真的想避免这种情况。我尝试包含的位图可能相当庞大,所以我最好更喜欢链接而不是嵌入。
答案 0 :(得分:11)
出于安全原因,浏览器会禁用此功能。
来自MDN,
限制
出于安全考虑,Gecko对SVG内容施加了一些限制 当它被用作图像时:
- 禁用JavaScript。
- 无法加载外部资源(例如图片,样式表),但如果通过BlobBuilder对象网址内联,则可以使用它们 数据:URI。
- :不呈现访问链接样式。
- 禁用平台本机窗口小部件样式(基于操作系统主题)。
另外,请查看Bugzilla@Mozilla
上的详细信息