将SVG引用为<；img>；在html中，将全部中断<；图像>；大多数浏览器中SVG中的位图_Html_Image_Svg_Xlink

将SVG引用为<；img>；在html中，将全部中断<；图像>；大多数浏览器中SVG中的位图

html image svg

将SVG引用为<；img>；在html中，将全部中断<；图像>；大多数浏览器中SVG中的位图,html,image,svg,xlink,Html,Image,Svg,Xlink,每当我尝试使用标签将svg作为html中的图像使用时，svg文件中使用标签引用的任何图像都不会显示在浏览器（firefox、chome、chromium、safari）中的svg中根本无法显示任何位图，但会在internet explorer中显示图像） HTML文件 <!DOCTYPE html> <html> <body> <img src="svg.svg" height="100" width="200" /> </body>

每当我尝试使用标签将svg作为html中的图像使用时，svg文件中使用

标签引用的任何图像都不会显示

在浏览器（firefox、chome、chromium、safari）中的svg中根本无法显示任何位图，但会在internet explorer中显示图像）

HTML文件

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

 <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>

SVG文件

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

 <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>

但是，如果我将与

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

它起作用了

或者，如果我使用

引用相同的svg文件，它也可以工作。 svg文件中的任何矢量对象（例如RECT）也可以与

或

配合使用

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

为什么html中的img标记会破坏svg文件中的图像标记xlinks

使用

嵌入的任何SVG都不能引用外部对象（与其他图像一样）。这是浏览器出于隐私原因故意实现的功能

您可以使用

嵌入SVG。或者，如果您确实需要使用

，请将SVG中的外部图像引用更改为数据URI。

好的，谢谢，我将SVG代码直接放在html文件中，而不是SVG文件中，它似乎在firefox中显示了，即chromium，而不是safari（所以我想我也不能使用这种方法。