Известна проблема с IE 9/10/11, где, если у вас есть файл SVG, где элемент <svg> указывает ширину и высоту, а затем вы масштабируете изображение SVG с помощью атрибутов width и height тега <img>, IE неправильно масштабирует изображение.
Я столкнулся с этой проблемой. У меня есть серия значков флагов SVG. Для значка флага США объект SVG записывается как:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="480" width="640">
<!-- elements to draw flag .. -->
</svg>
И вот полный источник для SVG.
Я вставляю SVG в HTML-документ с тегом <img> и уменьшаю его до 20x15:
В Chrome 39 SVG отображается правильно:
Но в IE10 он выглядит следующим образом:
Итак, что здесь происходит, так это то, что хотя IE10 определяет размер элемента <img> на 20x15, он не уменьшает масштаб SVG, поэтому мы видим только верхний левый угол значка флага, который отображается как простой синий квадрат.
Хорошо... так что это, похоже, известная проблема с документально подтвержденными решениями. Одним из решений является просто удалить все атрибуты width и height в SVG файле. Это кажется немного опасным, поскольку я не хочу испортить фактические проекты. Это также немного громоздко, если у вас много файлов SVG - требуется больше скриптов для обработки файлов.
Лучшим решением является использование CSS для специфической ориентации элементов SVG в IE10, что, по-видимому, возможно с использованием специального медиа-запроса поставщика:
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
img[src*=".svg"] {
width: 100%;
}
}
Хорошо, но я не понимаю этого решения. Когда я пытаюсь сделать это, IE10 просто расширяет размер SVG, чтобы заполнить весь родительский контейнер, чего я не хочу. Хорошо, возможно, я могу заставить IE масштабировать SVG, установив ширину SVG на 100%, но затем ограничивая размер родительского контейнера. Поэтому я обернул <img> в DIV с шириной и высотой 20x15. Но... это привело к той же проблеме, что и раньше: контейнер DIV зафиксирован на 20x15, но SVG не сжимается - так что все, что у нас заканчивается, - это верхний левый синий угол флага, как и раньше:
... так что я, вероятно, просто не понимаю что-то об этом решении. Как я могу заставить IE10/11 масштабировать значок флага до 20x15?
