想象一下以下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,或者在< image xlink：href =“...”/>中使用此SVG在另一个SVG中,将不会显示foo.png.使用file：//和http：//测试最新的Firefox和Chrome.任一浏览器的控制台中都没有任何内容,并且网络监视器未显示加载位图的尝试.
我错过了什么吗？我知道如果我将foo.png作为“data：image / svg xml; base64,…”嵌入,一切都会好的,但我真的想避免这种情况.我试图包含的位图可能相当大,所以我更喜欢链接而不是嵌入.
解决方法
出于安全原因,浏览器禁用此功能.
从MDN,
Restrictions
For security purposes,Gecko places some restrictions on SVG content
when it’s being used as an image:
- JavaScript is disabled.
- External resources (e.g. images,stylesheets) cannot be loaded,though they can be used if inlined through BlobBuilder object URLs or
data: URIs.- :visited-link styles aren’t rendered.
- Platform-native widget styling (based on OS theme) is disabled.
另外,请查看Bugzilla@Mozilla的详细信息
