SVG中的图片图片标签没有显示在Chrome中，但在本地显示？

由于某些原因，Chrome在其图片标签中显示的图片没有图片。SVG中的图片图片标签没有显示在Chrome中，但在本地显示？

这里是我的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>

来源

2016-12-17 sgruggy

你确定要改变''标签的路径以反映变化？即把'blocker.png'改成'http：// imgur.com/you/ABCDEF'或其他任何链接是 – Jhecht

@Jhecht是的，我确信我做到了。我在本地加载它，它出现了。加载在我的网页上，它没有。 – sgruggy

PaulLeBeau的答案是正确的。但另一种解决方案是使用embed标签代替图片的img标签。

<embed src="svg.svg">

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

来源

2016-12-17 06:15:24 nisekgao

哇，很棒！谢谢：） – kabrice

当您使用<img>元素将SVG加载到网页中时，SVG必须是自包含的。它不能像链接到PNG文件那样链接到第三方资源。这是浏览器施加的隐私限制。

可能的解决方案是：

转换您的PNG到数据URI格式，包括他们在您的SVG的方式。
将您的拦截器PNG（s）转换为实际的SVG元素，例如<path>。

来源

2016-12-17 05:49:31

为什么它会在本地工作？ – sgruggy

如果这是真的，那么当我将它上载到在线图像托管网站时，它不起作用。 – sgruggy

在浏览器中查看SVG（即'.svg'文件）很好，因为您没有通过''加载它。如果您的图像托管站点直接托管并提供'.svg'文件，而不是通过''嵌入它，这同样适用。 –

-1

我偶然发现如果图像文件不在html根目录下，Chrome [v 58.0.3029.81（64位）]不会在svg中显示图像。的.SVG和嵌入.png文件放在/图像-folder的.SVG内容直接在Chrome上来，而不是嵌入式巴纽。当.png被复制到（../）html根目录时，Chrome就可以运行。

但是，Firefox [v 52.0.2（32位）]在.svg和.png位于同一个/ images文件夹时似乎工作正常。

编辑：其实在我的情况下，我加载svg与d3.xml（..）方法获取js句柄到实际的svg元素。

来源

2017-04-20 17:42:54 mpeli

SVG中的图片图片标签没有显示在Chrome中，但在本地显示？

回答

相关问题