Используете значок SVG в псевдоэлементе с контролем над размером и цветом?
Я надеюсь добиться чего-то вроде этого:
Link >
Где > - это значок SVG.
Я использую значок «шеврон-правый» icomoon.io и загружаю значки, встраивая файл спрайта значков (в комплекте, только с этим значком).
Я ссылаюсь на другие встроенные значки, и они работают нормально.
<svg class = "icon"><use xmlns:xlink = "http://www.w3.org/1999/xlink" xlink:href = "#icon-menu"></use></svg>
.icon {
display: inline-block;
stroke-width: 0;
stroke: black;
fill: currentColor;
width: 1.1em;
height: 1.1em;
}
Я ищу способ ссылаться на значок в псевдоэлементе, чтобы я мог легко стилизовать с ним все ссылки.
Пока что единственный способ, который я нашел, - это встроить его, но я не могу контролировать размер или цвет - использую ли я его как фоновое изображение или как контент.
.-with-trailing-chevron:after {
content: "";
background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath fill='##4A89AA' d='M15.7 11.3l-6-6c-0.4-0.4-1-0.4-1.4 0s-0.4 1 0 1.4l5.3 5.3-5.3 5.3c-0.4 0.4-0.4 1 0 1.4 0.2 0.2 0.4 0.3 0.7 0.3s0.5-0.1 0.7-0.3l6-6c0.4-0.4 0.4-1 0-1.4z'%3E%3C/path%3E%3C/svg%3E");
background-image-size: cover; // these don't seem to work
display: inline-block;
width: .8em; // these don't seem to work on the icon
height: .8em; // these don't seem to work on the icon
}
Кроме того, я бы предпочел ссылаться на него вместо встраивания.
Это возможно?
Файл спрайта иконок, который я сейчас встроил, чтобы избежать несовместимости:
<svg aria-hidden = "true" style = "position: absolute; width: 0; height: 0; overflow: hidden;" version = "1.1" xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink">
<defs>
<symbol id = "icon-chevron-right" viewBox = "0 0 24 24">
<title>chevron-right</title>
<path d = "M15.7 11.3l-6-6c-0.4-0.4-1-0.4-1.4 0s-0.4 1 0 1.4l5.3 5.3-5.3 5.3c-0.4 0.4-0.4 1 0 1.4 0.2 0.2 0.4 0.3 0.7 0.3s0.5-0.1 0.7-0.3l6-6c0.4-0.4 0.4-1 0-1.4z"></path>
</symbol>
</defs>
</svg>
Пробовал атрибут содержимого; больше контроля не добавил; Я думаю, что моя основная проблема связана с масштабированием в обеих ситуациях. И необходимость встроить элемент в CSS. Скорее всего, я буду использовать значок в качестве ссылки svg в html, надеясь очистить разметку.
Ответы 1
URL-адреса данных обрабатываются как инертные изображения, которые не допускают внешних (по отношению к URL-адресу данных!) Ссылок. Вам нужно установить их свойства внутри в коде svg. Поэтому, если вы хотите изменить размер и цвет, только это будет работать:
a::after {
content: url('data:image/svg+xml,<svg width = "1em" height = "1em" fill = "green" xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 24 24"><path d = "M15.7 11.3l-6-6c-0.4-0.4-1-0.4-1.4 0s-0.4 1 0 1.4l5.3 5.3-5.3 5.3c-0.4 0.4-0.4 1 0 1.4 0.2 0.2 0.4 0.3 0.7 0.3s0.5-0.1 0.7-0.3l6-6c0.4-0.4 0.4-1 0-1.4z"></path></svg>');
vertical-align: -0.2em;
padding-left: 0.1em;
}
a:hover::after {
content: url('data:image/svg+xml,<svg width = "1.2em" height = "1.2em" fill = "red" xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 24 24"><path d = "M15.7 11.3l-6-6c-0.4-0.4-1-0.4-1.4 0s-0.4 1 0 1.4l5.3 5.3-5.3 5.3c-0.4 0.4-0.4 1 0 1.4 0.2 0.2 0.4 0.3 0.7 0.3s0.5-0.1 0.7-0.3l6-6c0.4-0.4 0.4-1 0-1.4z"></path></svg>');
vertical-align: -0.3em;
padding-left: 0;
}<a href = "">Link</a>Как видите, позиционирование все еще можно изменить с помощью CSS.
Большое спасибо, это решение, которое я могу использовать. Я был сбит с толку кавычками / двойными кавычками в определении content: и некоторыми проблемами позиционирования, которые решило свойство vertical-align.
Есть ли причина, по которой вы пытаетесь использовать SVG-шеврон в качестве фонового изображения вместо реального физического элемента в разметке? В качестве альтернативы, пробовали ли вы использовать атрибут content вместо фонового изображения для назначения псевдоэлемента? Вы можете изменить цвет и размер элемента, если он является частью атрибута содержимого, а не фонового изображения (не проверено).