Известна проблема с 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?
Это происходит, когда на вашем изображении отсутствует атрибут viewBox в элементе svg.
У вас должен быть установлен: 0 0 640 480. Нули X и Y смещения, а 640 и 480 соответствуют ширине и высоте. Он определяет прямоугольник, который представляет границы изображения.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="480" width="640" viewBox="0 0 640 480">
Вывести высоту и ширину из строки тега SVG.
IE9, IE10 и IE11 неправильно масштабируют файлы SVG, добавленные с помощью тегов img, когда указаны атрибуты viewBox, width и height.
Проблема может быть решена путем удаления только атрибутов width и height и управления ими только с помощью CSS.
img[src*=".svg"] {
width: 100%;
}
вот node script мне пришлось писать, чтобы исправить ту же проблему (для папки с несколькими SVG), возможно, это будет полезно для кого-то:
'use strict'
const fs = require('fs')
fs.readdir(`./`, (err, flist) => {
if (typeof flist != 'undefined') {
flist.forEach((file, i) => {
proceed(file)
})
}
})
function proceed(file){
fs.readFile(`./${file}`, 'utf8', (err,svg) => {
let out = svg.replace('<svg', '<svg viewBox="0 0 640 480" ')
if (!svg.includes('viewBox')){
fs.writeFile(file, out, err => {
if(err) {
console.log(err);
} else {
console.log("Saved: " + file);
}
})
}
})
}
Посмотрите @этот флаг из wonderflags для вашего ответа, вам нужно установить viewbox = "0 0 640 480" или он не будет работать. (Флаг ЕС)
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="480" width="640" viewBox="0 0 640 480"><defs><g id="d"><g id="b"><path d="M0-1l-.3 1h.5z" id="a"/><use transform="scale(-1 1)" xlink:href="#a"/></g><g id="c"><use transform="rotate(72)" xlink:href="#b"/><use transform="rotate(144)" xlink:href="#b"/></g><use transform="scale(-1 1)" xlink:href="#c"/></g></defs><path fill="#039" d="M0 0h640v480H0z"/><g transform="translate(320 242.263) scale(23.7037)" fill="#fc0"><use height="100%" width="100%" xlink:href="#d" y="-6"/><use height="100%" width="100%" xlink:href="#d" y="6"/><g id="e"><use height="100%" width="100%" xlink:href="#d" x="-6"/><use height="100%" width="100%" xlink:href="#d" transform="rotate(-144 -2.344 -2.11)"/><use height="100%" width="100%" xlink:href="#d" transform="rotate(144 -2.11 -2.344)"/><use height="100%" width="100%" xlink:href="#d" transform="rotate(72 -4.663 -2.076)"/><use xlink:href="#d" transform="rotate(72 -5.076 .534)"/></g><use height="100%" width="100%" xlink:href="#e" transform="scale(-1 1)"/></g></svg>