我遇到了Google Chrome不使用img
元素渲染SVG的问题。这种情况发生在刷新页面和初始页面加载时。我可以通过“检查元素”然后右键单击SVG文件并在新标签页中打开SVG文件来显示图像。然后,SVG图像将在原始页面上呈现。
<img src="../images/Aged-Brass.svg">
我完全不知道问题出在哪里。这个svg图片在IE9和FF中渲染得很好,但在Chrome或Safari中却不行。
我已经设置了我的MIME类型。(image/svg+xml)
编辑: 这是一个简单的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>
如你所见,我正在尝试在img
元素和CSS的背景图像中都使用一个svg文件。 在Chrome或Safari的初始页面加载时,两者都无法正常工作。 当我右键单击SVG或单击链接来在另一个窗口中加载SVG时,SVG文件将在原始标签中呈现。