Почему background в псевдоэлементе не отображает svg элемент в виде кода?
Если вставлять svg кодом в html - он отображается. Но если поместить его на background в псевдоэлементе - белое пятно.
.blog__slider .swiper-button-next::after{ color: #000; font-size: 0px; background: url('data:image/svg+xml;utf8, <svg width="47" height="47" viewBox="0 0 47 47" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21 16L28.5 23.5L21 31M46 23.5C46 11.0736 35.9264 1 23.5 1C11.0736 1 1 11.0736 1 23.5C1 35.9264 11.0736 46 23.5 46C35.9264 46 46 35.9264 46 23.5Z" stroke="#7E2832" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') !important; min-width: 47px; min-height: 47px; } |
.blog__slider .swiper-button-next::after{ color: #000; font-size: 0px; background: url('data:image/svg+xml;utf8, <svg width="47" height="47" viewBox="0 0 47 47" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21 16L28.5 23.5L21 31M46 23.5C46 11.0736 35.9264 1 23.5 1C11.0736 1 1 11.0736 1 23.5C1 35.9264 11.0736 46 23.5 46C35.9264 46 46 35.9264 46 23.5Z" stroke="#7E2832" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') !important; min-width: 47px; min-height: 47px; }
В чем может быть проблема? Ссылка на кодпен snippet
Дополнительно:
Если используете используете after before то и пишем content
https://yoksel.github.io/url-encoder/
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Проблема с отображением SVG элемента в виде кода в псевдоэлементе с использованием свойства background возможно связана с тем, что SVG файл не загружается или не корректно отображается из-за некорректного пути к файлу или неправильного использования CSS.
Если вы используете SVG файл как фоновое изображение в псевдоэлементе, убедитесь, что путь к файлу указан правильно и файл доступен по этому пути. Также проверьте, что SVG файл корректен и не содержит ошибок в своей структуре.
Для использования SVG кода в качестве фона псевдоэлемента, вам необходимо прописать его непосредственно в CSS, например, в виде base64 закодированной строки или вставить его напрямую в CSS файл с помощью data URI. Обратите внимание, что некоторые браузеры могут иметь ограничения на размер данных URI, поэтому убедитесь, что ваш SVG код не превышает допустимый размер.
Пример использования SVG кода как фонового изображения в псевдоэлементе с помощью base64 закодированной строки:
.element::before { content: ''; background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dH....'); background-size: cover; }
Если после всех этих проверок проблема с отображением SVG элемента в псевдоэлементе все еще остается, пожалуйста, предоставьте более подробную информацию о вашем коде и структуре файлов, чтобы мы могли дать более точный ответ на ваш вопрос.