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

Question

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

这无法在浏览器（firefox、chome、chromium、safari）中的 svg 中显示任何位图，但会在 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 中的所有 <image> 位图

Referencing SVG as <img> in html breaks all <image> bitmaps in the SVG in most browsers

html

svg

image

xlink