В IE 11 проблема с позиционированием SVG background-image?

Question

[Виталий]

Итак. Есть установка: background-image должны быть прямо в файле стилей в SVG и формате base64.
Для позиционирования бекграунда используется background-position: left 100%; (т.е. получается подчёркивание). А теперь внимание: работает везде, кроме IE. Тестирую на версии 11.0.20, ниже не пробовал - страшно.
Для тех кто меня не понял:
1. Открываем в браузере codepen.io/anon/pen/YXQreG - видим подчеркнутый текст
2. Открываем в IE - видим ПЕРЕчёркнутый текст

А теперь, господа знатоки, вопрос: что делать?
Хотелось бы меньшей кровью справиться. Что посоветуйте?

Answer 1

[Евгений Петров]

Убрал лишние атрибуты в SVG, непонятный path (первый из двух).
Для решения добавляем background-size в CSS.
Update: После более глубокого обдумывания значение auto заменено на 3px.

.container {
	background-size: 100% 3px;
}

Первый вариант
Указываем явно width и height в SVG.

<svg xmlns="http://www.w3.org/2000/svg" width="203" height="3" viewBox="0 0 203 3">

Второй вариант
Используем preserveAspectRatio в значении xMinYMax (по умолчанию xMidYMid).

<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMax" viewBox="0 0 203 3">

Третий вариант
Используем width, height и preserveAspectRatio в значении none. С учётом Chrome самый бронебойный.

<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" width="203" height="3" viewBox="0 0 203 3">

Comments

[Виталий]

Спасибо за ответ.
Лишний path убрал, отдельное спасибо за это, не заметил.
Все варианты подразумевают ширину в 203px. Это мне не подходит, класс применяется к пунктам меню при наведении, пункты могут быть от 100 до 300 px в ширину, по этому:
1. Вариант: подчёркивание отцентровано, но короче строки, по этому справа и слева остаются неподчёркнутые промежутки (Opera, Chrome); подчёркнута вся строка, но если она длиннее 203 то и высота подчёркивания становится больше, по этому длинные пунткы меню подчёркнуты жирнее. Итог: подчёркивание стало под ячейкой, но ведёт себя неадекватно.
2. Chrome и Opera - отлично. В FF и IE работает через Ж, рядом находятся две ячейки, одинаковой ширины, одна подчёркнута на 60%, другая на 75%, в IE некоторые ячейки вообще подчёркнуты только на 10%, так что подчёркивание даже не видно.
Итог: не подошло совсем.
3. Chrome и Opera - отлично. В FF и IE очень длинные пункты подчёркиваются жирнее, зато хотя бы целиком.

Что ж, иду тестировать в сафари и на линовую FF, там тоже часто бывают нестыковки.
Ещё раз спасибо, за неимением лучшего варианта буду использовать третий.

Можете посоветовать что-нибудь почитать по SVG, чтобы иметь представление о назначении, например, preserveAspectRatio?

[Евгений Петров]

Tratatuy: Благодарю за отчёт о тестировании. Ссылки я, по обыкновению, размещаю прямо в ответе. И на preserveAspectRatio есть, и на SVG можно выйти там же.
Также мне импонирует сайт Юлии Бухваловой, где есть разные исследования по SVG.

[Виталий]

Евгений Петров: не посмотрел, каюсь. Ещё раз спасибо!

[Евгений Петров]

Tratatuy: Кстати, я не понял вашего замечания про width и heigh в SVG. Это лишь говорит о том, что картинка имеет указанные размеры. С заданным background-size в 100% картинка растянется.

По задумке третий вариант должен именно растягивать картинку по горизонтали. Думаю, для сохранения вертикального размера мешает значение auto. Для обычных изображений, кстати, пропорции при таком значении будут сохранены.
Попробуйте задать
background-size: 100% 3px;

[Виталий]

Евгений Петров: Вот! Именно то, чего я хотел. Теперь во всех браузерах одно и то же, даже в Safari на MacBook смотрится как надо. Теперь можно считать вопрос закрытым окончательно, собственно по этому я и не закрывал тему.