Chrome无法呈现通过< img>引用的SVG.元素 [英] Chrome not rendering SVG referenced via <img> element
问题描述
我遇到了Google Chrome无法使用 img 元素呈现svg的问题.刷新页面和初始页面加载时会发生这种情况.我可以通过检查元素"然后右键单击svg文件，然后在新标签页中打开svg文件.SVG图片将呈现在原始页面上.
I am having issues with google chrome not rendering svg with an img element. This happens when refreshing the page and initial page load. I can get the image to show up by "Inspecting Element" then right clicking the svg file and opening the svg file in a new tab. The svg image will then be rendered on the original page.
<img src="../images/Aged-Brass.svg">
这里完全是问题所在.svg图像在IE9和FF中可以很好地呈现，而在Chrome或Safari中则不能.
Totally at loss here as to what the issue is. The svg image renders fine in IE9 and FF just not in Chrome or Safari.
我也设置了我的MIME类型.(图片/svg + xml)
I have my MIME types set as well. (image/svg+xml)
这是我用来帮助说明我的问题的简单html页面.
Here is a simple html page that I built to help illustrate my issue.
<!DOCTYPE html>
<html>
<head>
<title>SVG Test</title>
<style>
#BackgroundImage{
background: url('../images/Aged-Brass.svg') no-repeat scroll left top;
width: 400px;
height: 600px;
}
#image_element {
width: 400px;
height: 600px;
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div id="image_element">
<img src="../images/Aged-Brass.svg">
</div>
<div id="BackgroundImage"></div>
</body>
</html>
如您所见，我正在尝试同时在 img 元素和CSS中使用一个svg文件作为背景图像.chrome或safari的初始页面加载均无效.当我检查元素时，右键单击svg或单击链接以将svg加载到另一个窗口中，该svg文件将在原始选项卡中呈现.
As you can see I am trying to use an svg file in both an img element and in css as a background image. Neither work on the initial page load in chrome or safari. When I inspect element right click svg or click link to svg load in another window the svg file will render in original tab.
推荐答案
一种简单的方法；根据 https://css-tricks.com/forums/topic/svg-css-background-image-not-showing-in-chrome/您必须使用文本编辑器(如记事本)打开.SVG文件，然后更改
A simple and easy way; according to https://css-tricks.com/forums/topic/svg-css-background-image-not-showing-in-chrome/ You have to open the .SVG file with a text editor (like notepad) and change
xlink:href="data:img/png;base64,
收件人:
xlink:href="data:image/png;base64,
对我有用！
这篇关于Chrome无法呈现通过< img>引用的SVG.元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
