Как происходит наследование стилей в svg?
На примере этой свг
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <g id="ideate/line/love" clip-path="url(#clip0_1759_26884)"> <path id="Vector" d="M9.80284 17.5752C-5.19626 5.10188 4.05213 -0.993139 9.78866 4.01376C9.89165 4.10366 9.94315 4.14861 9.99941 4.14861C10.0557 4.14861 10.1072 4.10366 10.2102 4.01376C15.9467 -0.993139 25.1951 5.10188 10.196 17.752C10.1011 17.6542 10.0536 17.6936 9.99941 17.6936C9.94519 17.6936 9.89774 17.6542 9.80284 17.5752Z" stroke="red" stroke-width="1.5" stroke-linecap="round"/> </g> <defs> <clipPath id="clip0_1759_26884"> <rect width="20" height="20" fill="white"/> </clipPath> </defs> </svg> |
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <g id="ideate/line/love" clip-path="url(#clip0_1759_26884)"> <path id="Vector" d="M9.80284 17.5752C-5.19626 5.10188 4.05213 -0.993139 9.78866 4.01376C9.89165 4.10366 9.94315 4.14861 9.99941 4.14861C10.0557 4.14861 10.1072 4.10366 10.2102 4.01376C15.9467 -0.993139 25.1951 5.10188 10.196 17.752C10.1011 17.6542 10.0536 17.6936 9.99941 17.6936C9.94519 17.6936 9.89774 17.6542 9.80284 17.5752Z" stroke="red" stroke-width="1.5" stroke-linecap="round"/> </g> <defs> <clipPath id="clip0_1759_26884"> <rect width="20" height="20" fill="white"/> </clipPath> </defs> </svg>
Мне нужно при хавере задать stroke у path red, но при этом обращась только в svg тегу, так как я использую спрайт через use.
Как это можно сделать?Я знаю только способ через currentcolor
Дополнительно:
Точно также как и с fill.
Убираем из svg, задаем через стили.
Хочется и удобно через currentColor, делайте через currentColor
svg:hover path { stroke: aqua; } |
svg:hover path { stroke: aqua; }
Ты можешь использовать css переменные.
snippet
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
В SVG (Scalable Vector Graphics) наследование стилей происходит похожим образом, как и в CSS. В SVG можно использовать атрибуты, которые задают стили элементов, такие как fill, stroke, stroke-width и другие.
Если вы хотите наследовать стили от родительского элемента, то вы можете использовать атрибуты style или классы, как в CSS. Например:
.parent { fill: blue; } .child { fill: inherit; }.parent { fill: blue; } .child { fill: inherit; }
В данном примере, первый прямоугольник будет заполнен синим цветом, так как у него есть класс "parent", который задает fill: blue. Второй прямоугольник будет наследовать стиль от родительского элемента, так как у него есть класс "child" с fill: inherit.
Также можно использовать атрибуты fill и stroke для задания цвета заливки и обводки элементов напрямую:
Этот код создаст прямоугольник с красной заливкой.
Таким образом, наследование стилей в SVG происходит через классы, стили или атрибуты fill и stroke, по аналогии с CSS.