Question

出于某种原因，Chrome正在显示SVG而图像标签中没有图像。

以下是我的SVG中的示例：

<image xlink:href="blocker.png" height="312.666661" width="85.693825" y="16.479997" x="459.946664"/>

blocker.png是一个本地文件，但我也尝试将其上传到imgur，但这也不起作用。

这是svg标签：

<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

以下是本地的情况：

http://i.imgur.com/BDP8KpG.png

以下是在实际网页上的内容：

http://i.imgur.com/KVuxLI1.png

如你所见，这两名球员都失踪了。当我在线上传SVG时不会发生这种情况，但是当我尝试将该URL链接到我的页面时，同样的事情发生了

不确定它是否相关，但这是该页面的HTML代码：

<!DOCTYPE HTML>
<html>
<head>
<title>SVG</title> 
<style>
img{
    width: 100%;
    height:auto;
    max-width: 800px;
}
</style>
</head>

<body>

<div>
    <img src="svg.svg"/>
</div>

</body>
</html>

Answer 1

PaulLeBeau的回答是正确的。但另一种解决方案是为图片使用embed代码而不是img代码。

<embed src="svg.svg">

Here是在HTML中嵌入svg图像的一些方法。

Answer 2

使用<img>元素将SVG加载到网页时，SVG必须是自包含的。它不能像链接到PNG文件那样链接到第三方资源。这是浏览器强加的隐私限制。

可能的解决方案是：

将您的PNG转换为数据URI格式，并将其包含在您的SVG中。
将您的阻止PNG转换为实际的SVG元素，例如<path>。

Answer 3

另一个适用于我的解决方案是，在任何编辑器（VS代码或Notepad ++）中打开SVG图像并替换

get()

到

xlink:href="data:img/png;base64,

img到图像。

希望这在有人还在寻找时会有所帮助。

Answer 4

我碰巧发现Chrome [v 58.0.3029.81（64位）]如果图片文件不在html根目录下，则不会在svg中显示图像。 .svg和嵌入式.png文件放在/ images -folder中，.svg内容出现在Chrome中，但不是嵌入式.png。当.png被复制到（../）html root时，Chrome就可以运行。

然而，当.svg和.png位于相同的/ images文件夹中时，Firefox [v 52.0.2（32位）]似乎工作正常。

编辑：实际上在我的情况下，我使用d3.xml（..）方法加载svg，以获取实际svg元素的js句柄。

SVG中的图片图片代码未在Chrome中显示，但在本地显示？

4 个答案: