Tratatuy
@Tratatuy
Люблю задавать вопросы

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

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

А теперь, господа знатоки, вопрос: что делать?
Хотелось бы меньшей кровью справиться. Что посоветуйте?
  • Вопрос задан
  • 6030 просмотров
Решения вопроса 1
Petroveg
@Petroveg
Миром правят маленькие с#@&ки
Убрал лишние атрибуты в 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">
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы