Tôi đang gặp sự cố với việc google chrome không hiển thị svg với thẻ img. Điều này xảy ra khi làm mới trang và tải trang đầu tiên. Tôi có thể làm cho hình ảnh hiển thị bằng cách "Kiểm tra phần tử", sau đó nhấp chuột phải vào tệp svg và mở tệp svg trong một tab mới. Hình ảnh svg sau đó sẽ được hiển thị trên trang gốc.
<img src="../images/Aged-Brass.svg">
Ở đây hoàn toàn không hiểu vấn đề là gì. Hình ảnh svg hiển thị tốt trong IE9 và FF, không phải trong Chrome hoặc Safari.
Tôi cũng đã đặt các loại MIME của mình. (hình ảnh / svg + xml)
CHỈNH SỬA: Đây là một trang html đơn giản mà tôi đã xây dựng để giúp minh họa sự cố của tôi.
<!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>
Như bạn có thể thấy, tôi đang cố gắng sử dụng tệp svg trong cả thẻ img và trong css làm hình nền. Không hoạt động khi tải trang đầu tiên trong chrome hoặc safari. Khi tôi kiểm tra phần tử, hãy nhấp chuột phải vào svg hoặc nhấp vào liên kết để tải svg trong một cửa sổ khác, tệp svg sẽ hiển thị trong tab gốc.