SVG中的图像Image标签没有显示在Chrome中,而是在本地显示? [英] Images in SVG Image tags not showing up in Chrome, but displays locally?
问题描述
由于某些原因,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中,而是在本地显示?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!