У меня возникли проблемы с тем, что Google Chrome не отображает svg с тегом img. Это происходит при обновлении страницы и начальной загрузке страницы. Я могу заставить изображение появиться, выполнив «Проверка элемента», затем щелкнув файл svg правой кнопкой мыши и открыв файл svg на новой вкладке. Затем изображение svg будет отображено на исходной странице.
<img src="../images/Aged-Brass.svg">
Совершенно не понимаю, в чем проблема. Изображение svg отлично отображается в IE9 и FF, но не в Chrome или Safari.
У меня также установлены типы MIME. (изображение / 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;
}
#ImageTag{
width: 400px;
height: 600px;
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div id="ImageTag">
<img src="../images/Aged-Brass.svg">
</div>
<div id="BackgroundImage"></div>
</body>
</html>
Как видите, я пытаюсь использовать файл svg как в теге img, так и в css в качестве фонового изображения. Ни одна из них не работает при начальной загрузке страницы в хроме или сафари. Когда я проверяю элемент, щелкните правой кнопкой мыши svg или щелкните ссылку для загрузки svg в другом окне, файл svg отобразится на исходной вкладке.
