出于某种原因，Chrome显示的SVG在其Image标签中没有图像。
下面是我的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">型
以下是它在本地的样子：
https://i.stack.imgur.com/Ga7je.png
以下是它在Live网页上的样子：
https://i.stack.imgur.com/aeNmt.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>型
6条答案
按热度按时间eni9jsuy1#
PaulLeBeau的答案是正确的，但另一种解决方案是使用
embed标签而不是img标签。字符串
下面是一些在HTML中嵌入svg图像的方法。
rkue9o1l2#
另一个对我有效的解决方案是，在任何编辑器（Vs代码或Notepad++）中打开SVG图像，并替换
字符串
到
型
img图片
希望这对你有帮助，如果有人还在寻找它。
fnx2tebb3#
当您使用
<img>元素将SVG加载到网页中时，SVG必须是自包含的。它不能像您通过链接到PNG文件那样链接到第三方资源。这是浏览器强加的隐私限制。可能的解决方案是：
1.将您的PNG转换为Data URI格式，并以这种方式将它们包含在SVG中。
1.将您的拦截器PNG转换为实际的SVG元素，例如
<path>。8ulbf1ek4#
我碰巧发现，如果图像文件不在html根目录下，Chrome [v 58.0.3029.81（64位）]不会显示svg中的图像。.svg和嵌入的.png文件被放置在/images -文件夹中，.svg内容会直接出现在Chrome中，但嵌入的. png不会。当.png被复制到（../）html根目录，Chrome工作。
然而，Firefox [v 52.0.2（32位）]似乎可以在.svg和.png位于同一个/images文件夹中时正常工作。
编辑：实际上，在我的例子中，我用d3.xml（..）方法加载svg，以获取实际svg元素的js句柄。
k97glaaz5#
在根目录下的.htaccess文件中添加以下内容：
第一个月
这是我在标题>>网络>>内容类型。应该是'image/svg+xml'而不是'txt/plain...'。
通过添加上面的代码，我的SVG在img标签中呈现。
x1c 0d1x的数据
sirbozc56#
我们应该在img.src文件的src标记中添加一个名称空间标识符
xmlns=”http://www.w3.org/2000/svg“将其作为属性添加到img. svg文件中的src标记中。