SVG中的链接图像

时间:2013-07-15 13:44:12

标签: html5 svg

想象一下以下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;,一切都会好的,但我真的想避免这种情况。我尝试包含的位图可能相当庞大,所以我最好更喜欢链接而不是嵌入。

1 个答案:

答案 0 :(得分:11)

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

来自MDN

  

限制

     

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

     
      
  • 禁用JavaScript。
  •   
  • 无法加载外部资源(例如图片,样式表),但如果通过BlobBuilder对象网址内联,则可以使用它们   数据:URI。
  •   
  • :不呈现访问链接样式。
  •   
  • 禁用平台本机窗口小部件样式(基于操作系统主题)。
  •   

另外,请查看Bugzilla@Mozilla

上的详细信息