出于某种原因,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>
nis*_*gao 31
PaulLeBeau的回答是对的.但另一种解决方案是使用embed标签而不是img图片的标签.
<embed src="svg.svg">
以下是在HTML中嵌入svg图像的一些方法.
Ars*_*eer 21
另一个对我有用的解决方案是，在任何编辑器（Vs 代码或 Notepad++）中打开 SVG 图像并替换
xlink:href="data:img/png;base64,
到
xlink:href="data:image/png;base64,
img 到图像。
如果有人仍在寻找它，希望这会有所帮助。
Pau*_*eau 12
使用<img>元素将SVG 加载到网页时,SVG必须是自包含的.它不能像链接到PNG文件那样链接到第三方资源.这是浏览器强加的隐私限制.
可能的解决方案是
将PNG转换为数据URI格式,并以这种方式将它们包含在SVG中.
将阻塞PNG转换为实际的SVG元素,例如a <path>.