问题描述
由于某些原因,Chrome浏览器显示的SVG的图像"标签中没有图像.
For some reason, Chrome is displaying the SVG without the images in its Image tags.
这是我的SVG中的示例:
Here is a sample from my SVG:
<image xlink:href="blocker.png" height="312.666661" width="85.693825" y="16.479997" x="459.946664"/>
blocker.png是本地文件,但我也尝试将其上传到imgur,但这也不起作用.
blocker.png is a local file, but I also tried uploading it to imgur, but that didn't work either.
这是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
这是实时网页上的外观:
Here is what it looks like on a live webpage:
http://i.imgur.com/KVuxLI1.png
如您所见,两名球员失踪了.在线上传SVG时不会发生这种情况,但是当我尝试将该URL链接到我的页面时,会发生同样的情况
As you can see, the two players are missing. This doesn't happen when I upload the SVG online, but when I try to link that URL to my page, the same thing happens
不确定是否相关,但这是页面的HTML代码:
Not sure if it's relevant, but here is the HTML code for the page:
<!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
标签.
PaulLeBeau's answer is right. But another solution is to use an embed
tag instead of an img
tag for the picture.
<embed src="svg.svg">
此处是嵌入svg图像的一些方法在HTML中.
Here are some ways to embed svg images in HTML.
这篇关于SVG中的图像Image标签没有显示在Chrome中,而是在本地显示?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!