Задача такая, для IE11 и Edge задать отдельные стили для SVG, потому что в этих браузерах не поддерживаются фильтры для свг и соответственно свг-шка не отображается как положено (или вообще не отображается).
В общем, все известные мне способы из интернета, как задетектить IE, не сработали или сработали не так как ожидалось, пробовал и эти варианты, и многие другие:
@media screen and (min-width:0\0) { }
@media all and (-ms-high-contrast: none) { }
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { }
@supports (-webkit-appearance: none) { }
Поэтому пришлось прибегнуть к старому доброму определению браузера IE с помощью JS:
var isIE = '-ms-scroll-limit' in document.documentElement.style && '-ms-ime-align' in document.documentElement.style;
Если isIE равно true, значит можем навесить на любой элемент класс .ie-support, в моем примере, для меня лучше навесить данный класс на body, потому как потом можно обратиться к любому элементу внутри body:
if (isIE) {
$('body').addClass('ie-support');
}
И уже в стилях можем задать любые нужные правила для элементов, если страница открыта в браузере IE:
.ie-support svg path {
filter: none;
}
Данные правила сработают только в браузере IE11 или Edge.