我遇到了 google chrome 无法渲染 svg 的问题img元素。刷新页面和初始页面加载时会发生这种情况。我可以通过“检查元素”来显示图像，然后右键单击 svg 文件并在新选项卡中打开 svg 文件。然后 svg 图像将呈现在原始页面上。
<img src="../images/Aged-Brass.svg">
完全不知道问题是什么。 svg 图像在 IE9 和 FF 中渲染良好，但在 Chrome 或 Safari 中渲染不佳。
我也设置了 MIME 类型。 （图像/svg+xml）
EDIT:这是我构建的一个简单的 html 页面，旨在帮助说明我的问题。
<!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>
正如你所看到的，我正在尝试在两个文件中使用 svg 文件img元素并在 css 中作为背景图像。两者都不适用于 Chrome 或 Safari 中的初始页面加载。当我检查元素时右键单击 svg 或单击另一个窗口中的 svg 加载链接，svg 文件将在原始选项卡中呈现。
一个简单又容易的方法；根据https://css-tricks.com/forums/topic/svg-css-background-image-not-showing-in-chrome/您必须使用文本编辑器（如记事本）打开 .SVG 文件并更改
xlink:href="data:img/png;base64,
to:
xlink:href="data:image/png;base64,
它对我有用！
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
