html – SVG中的图像图像标签未显示在Chrome中,但在本地显示?

前端之家收集整理的这篇文章主要介绍了html – SVG中的图像图像标签未显示在Chrome中,但在本地显示?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
出于某种原因,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>

解决方法

PaulLeBeau的回答是对的.但另一种解决方案是使用embed标签而不是图片img标签.
<embed src="svg.svg">

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

猜你在找的HTML相关文章