带有“img”标签的HTML中包含的SVG是否可以链接到带有“image”标签的外部图像？

Question

我在服务器上的同一位置有以下文件image.svg和一个文件bitmap.png：

<?xml version="1.0" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100px" height="100px" version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <image x="0" y="0" width="100px" height="100px"
         xlink:href="bitmap.png" />
</svg>

当我直接进入图像文件时，它包含了bitmap.png图像。

当我将图片包含在带有<object data="image.svg"></object>标记的网页中时，会加载bitmap.png文件。

当我将图片包含在包含<img src="image.svg" />标记的网页中时，bitmap.png会不加载。

是什么给出了？

Answer 1

svg本身是有效的。

当通过＆lt; img＆gt;引用svg时，某些浏览器不允许外部引用。你可以做的是将png转换为数据URI，然后将其放在那里，参见例如this answer，了解如何做到这一点。