Question

每当我尝试使用标签将svg用作html中的图像时，使用<image xlink:href="">标签在svg文件中引用的任何图像都不会显示。

这无法在浏览器中的svg中显示任何位图（firefox，chome，chromium，safari），但会在Internet Explorer中显示图像。

HTML文件

<!DOCTYPE html>
<html>
<body>
<img src="svg.svg" height="100" width="200" />
</body>
</html>

SVG文件

 <svg version="1.1"
    baseProfile="full"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xmlns:ev="http://www.w3.org/2001/xml-events" height="100" width="200">
    <image height="100" width="200" xlink:href="image1.jpg" />
    </svg>

但是，如果我将完全相同的代码直接放在html文件中

<svg height="100" width="200"> 
<image height="100" width="200" xlink:href="image1.jpg" />
</svg>

有效。

或者，如果我使用<object data="">引用相同的svg文件，它也可以。 svg文件中的任何矢量对象（例如，rects）也适用于<img>或<object>。

如果我直接加载svg文件，它可以在所有浏览器中正常运行。

为什么html中的img标签在svg文件中破坏了我的图像标签xlinks？

Answer 1

使用<img>嵌入的任何SVG都不能引用外部对象（如其他图像）。这是浏览器出于隐私原因而实施的故意功能。

您可以使用<object>来嵌入SVG。或者，如果您确实需要使用<img>，请将SVG中的外部图像引用更改为数据URI。

在大多数浏览器中，在html中将SVG引用为<img/>会破坏SVG中的所有<img/>位图

1 个答案: