SVG中的图像Image标签没有显示在Chrome中,而是在本地显示? [英] Images in SVG Image tags not showing up in Chrome, but displays locally?

查看:711
本文介绍了SVG中的图像Image标签没有显示在Chrome中,而是在本地显示?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

由于某些原因,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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆