SVG中的链接图像

Question

想象一下以下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里面,不会有显示foo.png.使用file://和http://测试最新的Firefox和Chrome.任一浏览器的控制台中都没有任何内容,并且网络监视器未显示加载位图的尝试.

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

Answer 1

出于安全原因,浏览器禁用此功能.

来自MDN,

限制

出于安全考虑,Gecko在将SVG内容用作图像时会对其进行一些限制:

• JavaScript已禁用.
• 无法加载外部资源(例如图像,样式表),但如果通过BlobBuilder对象URL或数据:URI进行内联,则可以使用它们.
• :未呈现访问链接样式.
• 平台本机窗口小部件样式(基于OS主题)被禁用.

另外,请查看Bugzilla @ Mozilla的详细信息