出于某种原因,Chrome显示的SVG在其Image标签中没有图像。
下面是我的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">
型
以下是它在本地的样子:
https://i.stack.imgur.com/Ga7je.png
以下是它在Live网页上的样子:
https://i.stack.imgur.com/aeNmt.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>
型
6条答案
按热度按时间eni9jsuy1#
PaulLeBeau的答案是正确的,但另一种解决方案是使用
embed
标签而不是img
标签。字符串
下面是一些在HTML中嵌入svg图像的方法。
rkue9o1l2#
另一个对我有效的解决方案是,在任何编辑器(Vs代码或Notepad++)中打开SVG图像,并替换
字符串
到
型
img图片
希望这对你有帮助,如果有人还在寻找它。
fnx2tebb3#
当您使用
<img>
元素将SVG加载到网页中时,SVG必须是自包含的。它不能像您通过链接到PNG文件那样链接到第三方资源。这是浏览器强加的隐私限制。可能的解决方案是:
1.将您的PNG转换为Data URI格式,并以这种方式将它们包含在SVG中。
1.将您的拦截器PNG转换为实际的SVG元素,例如
<path>
。8ulbf1ek4#
我碰巧发现,如果图像文件不在html根目录下,Chrome [v 58.0.3029.81(64位)]不会显示svg中的图像。.svg和嵌入的.png文件被放置在/images -文件夹中,.svg内容会直接出现在Chrome中,但嵌入的. png不会。当.png被复制到(../)html根目录,Chrome工作。
然而,Firefox [v 52.0.2(32位)]似乎可以在.svg和.png位于同一个/images文件夹中时正常工作。
编辑:实际上,在我的例子中,我用d3.xml(..)方法加载svg,以获取实际svg元素的js句柄。
k97glaaz5#
在根目录下的.htaccess文件中添加以下内容:
第一个月
这是我在标题>>网络>>内容类型。应该是'image/svg+xml'而不是'txt/plain...'。
通过添加上面的代码,我的SVG在img标签中呈现。
x1c 0d1x的数据
sirbozc56#
我们应该在img.src文件的src标记中添加一个名称空间标识符
xmlns=”http://www.w3.org/2000/svg“将其作为属性添加到img. svg文件中的src标记中。