Наше веб-приложение использует SVG для большинства своих изображений.Иногда мы помещаем их в промежутки как фоновые изображения, иногда мы помещаем их в теги img.Проблема в том, что если у нас одинаковые svg, используемые в обоих случаях на одной странице с разными размерами, IE9 не сможет изменить размер второго набора изображений.
Пример стоит 1000 слов:
test.html
<!doctype html>
<html>
<head><title>Foo</title></head>
<style>
.half { width: 16px; height: 16px; }
.full { width: 32px; height: 32px; }
.double{ width: 64px; height: 64px; }
span.img {
display: inline-block;
background-image: url('circle.svg');
background-size: 100% 100%;
}
</style>
<body>
<b>Span</b><br />
16: <span class="img half"></span>
32: <span class="img full"></span>
64: <span class="img double"></span>
<hr />
<b>Img</b><br />
16:<img src="circle.svg" class="half" />
32:<img src="circle.svg" class="full" />
64:<img src="circle.svg" class="double" />
<hr />
</body>
</html>
circle.svg
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">
<g>
<circle r="16" cx="16" cy="16" />
</g>
</svg>
В Chrome и Firefox это выглядит великолепно.В IE9 все нижние изображения отображаются с разрешением 32px и обрезаются, чтобы соответствовать контейнеру.Если вы удаляете либо пролеты, либо изображения, все в порядке.
Кроме того, если вы измените URL-адрес изображения для любого из них на 'circle.svg?'Чтобы обойти кеш браузера, он также отлично работает.
Кто-нибудь знает какие-либо способы обойти это?Как можно одновременно отображать теги span и img с одинаковым содержимым SVG?Перспектива изменить все теги img на span (или наоборот) устарела, равно как и добавление к каждому из них ложного параметра запроса для обхода кэша.