Html SVG Image 标签中的图像未显示在 Chrome 中，但显示在本地？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41195669/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Images in SVG Image tags not showing up in Chrome, but displays locally?
提问by sgruggy
For some reason, Chrome is displaying the SVG without the images in its Image tags.
出于某种原因，Chrome 在其 Image 标签中显示没有图像的 SVG。
Here is a sample from my SVG:
这是我的 SVG 中的一个示例：
<image xlink:href="blocker.png" height="312.666661" width="85.693825" y="16.479997" x="459.946664"/>
blocker.png is a local file, but I also tried uploading it to imgur, but that didn't work either.
blocker.png 是一个本地文件，但我也尝试将其上传到 imgur，但这也不起作用。
Here is the svg tag:
这是 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">
Here is what it looks like locally:
这是它在本地的样子：
http://i.imgur.com/BDP8KpG.png
http://i.imgur.com/BDP8KpG.png
Here is what it looks like on a live webpage:
这是它在实时网页上的样子：
http://i.imgur.com/KVuxLI1.png
http://i.imgur.com/KVuxLI1.png
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
如您所见，这两名球员都失踪了。当我在线上传 SVG 时不会发生这种情况，但是当我尝试将该 URL 链接到我的页面时，会发生同样的事情
Not sure if it's relevant, but here is the HTML code for the page:
不确定它是否相关，但这是页面的 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>
回答by nisekgao
回答by Paul LeBeau
When you load an SVG into a webpage using an <img>element, the SVG has to be self-contained. It cannot link to third part resources like you are doing by linking to the PNG files. This a privacy restriction imposed by the browser.
当您使用<img>元素将 SVG加载到网页中时，SVG 必须是自包含的。它不能像您通过链接到 PNG 文件那样链接到第三方资源。这是浏览器强加的隐私限制。
Possible solutions are:
可能的解决方案是：
Convert your PNG to Data URI format and include them in your SVG that way.
Convert your blocker PNG(s) to actual SVG elements, such as a
<path>.
将您的 PNG 转换为数据 URI 格式，并以这种方式将它们包含在您的 SVG 中。
将您的拦截器 PNG 转换为实际的 SVG 元素，例如
<path>.
回答by mpeli
I happened to find out that Chrome [v 58.0.3029.81 (64-bit)] doesn't show the image inside svg if the image file is not located at html root directory. The .svg and the embedded .png files were placed in /images -folder, the .svg content came up right in Chrome, but not the embedded .png. When the .png was copied to (../) the html root, Chrome works.
我碰巧发现如果图像文件不在 html 根目录下，Chrome [v 58.0.3029.81 (64-bit)] 不会在 svg 中显示图像。.svg 和嵌入的 .png 文件被放置在 /images 文件夹中，.svg 内容直接出现在 Chrome 中，但不是嵌入的 .png。当 .png 被复制到 (../) html 根目录时，Chrome 就可以工作了。
However, Firefox [v 52.0.2 (32-bit)] seems to work fine when .svg and .png are in the same /images folder.
但是，当 .svg 和 .png 位于同一个 /images 文件夹中时，Firefox [v 52.0.2 (32-bit)] 似乎可以正常工作。
Edit: Actually in my case I load the svg with d3.xml(..) method for getting js handle to the actual svg elements.
编辑：实际上在我的情况下，我使用 d3.xml(..) 方法加载 svg 以获取实际 svg 元素的 js 句柄。
