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

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

Answer 1

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

来自MDN，

限制

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


禁用JavaScript。

无法加载外部资源（例如图片，样式表），但如果通过BlobBuilder对象网址内联，则可以使用它们   数据：URI。

：不呈现访问链接样式。

禁用平台本机窗口小部件样式（基于操作系统主题）。

另外，请查看Bugzilla@Mozilla

上的详细信息

SVG中的链接图像

1 个答案: