SVG 中的图像图像标签未显示在 Chrome 中，但在本地显示？答案

【问题标题】：Images in SVG Image tags not showing up in Chrome, but displays locally?SVG 中的图像图像标签未显示在 Chrome 中，但在本地显示？
【发布时间】：2017-05-02 21:58:40
【问题描述】：

由于某种原因，Chrome 显示的 SVG 图像标签中没有图像。

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

【问题讨论】：

您确定更改<image> 标记的路径以反映更改吗？ IE。将blocker.png 更改为http://imgur.com/you/ABCDEF 或其他任何链接
@Jhecht 是的，我确定我做到了。我在本地加载它，它出现了。加载到我的网页上，但没有。

标签： html css svg web

【解决方案1】：

PaulLeBeau 的回答是正确的。但另一种解决方案是为图片使用embed 标签而不是img 标签。

<embed src="svg.svg">

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

【讨论】：

哇！多么圆滑的答案！你是怎么找到这个embed 标签的？
警告：这个解决方案导致我的页面永远加载。我在本地机器上的 cpu 时钟频率为 %100！

【解决方案2】：

另一个对我有用的解决方案是，在任何编辑器（Vs 代码或 Notepad++）中打开 SVG 图像并替换

xlink:href="data:img/png;base64,

到

xlink:href="data:image/png;base64,

img 到图像。

如果有人还在寻找它，希望这会有所帮助。

【讨论】：

这对我来说效果很好。谢谢你。如果您有很多 svg 文件，可以加快速度：sed -i '' -e 's/data:img/data:image/g' *.svg

【解决方案3】：

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

可能的解决方案是：

将您的 PNG 转换为数据 URI 格式，并以这种方式将它们包含在您的 SVG 中。
将阻止程序 PNG 转换为实际的 SVG 元素，例如 <path>。

【讨论】：

如果那是真的，那么当我将它上传到在线图像托管网站时它也不会起作用，它确实做到了。
在浏览器中查看 SVG（即.svg 文件）很好，因为您不是通过<img> 加载它。如果您的图像托管站点直接托管和提供 .svg 文件，而不是通过 <img> 嵌入它，这同样适用。

【解决方案4】：

我碰巧发现如果图像文件不在 html 根目录中，Chrome [v 58.0.3029.81 (64-bit)] 不会在 svg 中显示图像。 .svg 和嵌入的 .png 文件放置在 /images -文件夹中，.svg 内容直接出现在 Chrome 中，而不是嵌入的 .png。当 .png 被复制到 (../) html 根目录时，Chrome 就可以工作了。

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

编辑：实际上，在我的情况下，我使用 d3.xml(..) 方法加载 svg，以获取实际 svg 元素的 js 句柄。

【讨论】：

【解决方案5】：

将此添加到根目录下的 .htaccess 文件中：

AddType image/svg+xml .svg .svgz

这是我在标题>>网络>>内容类型中的内容。应该是 'image/svg+xml' 而不是 'txt/plain....'

通过添加上面的代码，我的 SVG 在 img 标签中呈现。

【讨论】：