Заливка SVG переменными css
Я пытаюсь использовать переменные CSS в моем SVG (который установлен в качестве фонового изображения) для цвета заливки, но мне трудно заставить его работать. Он показывает черный цвет по умолчанию, но когда я его проверяю, я вижу, что переменная css есть и показывает желаемый цвет.
HTML
<div class = "test">
Testing the css variable color
</div>
<div class = "icon">
</div>
CSS
:root {
--primary-color: hsl(332, 61%, 78%);
}
div {
width: 100px;
height: 100px;
}
.test {
background: var(--primary-color);
}
.icon {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 129 129'%3E%3Cpath d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' fill='var(--primary-color)' /%3E%3C/svg%3E");
}
Вот код, который стоит проверить!
Я видел, как переменные CSS используются в SVG здесь, но я не уверен, можно ли это сделать с фоновыми изображениями? Я новичок в использовании переменных SVG и CSS, поэтому я не уверен, что делаю что-то не так ... Хотелось бы узнать, почему он не отображает цвет правильно!
нет, это невозможно, вы не можете использовать такую переменную CSS, когда она вызывается с URL-адресом
дубликат: stackoverflow.com/questions/42330075/…
Ответы 5
Не включайте svg в качестве фона, делая это, у вас нет контроля над его заполнением, вместо этого попробуйте добавить его встроенным в html, а через css вы можете управлять заполнением через переменную css, пожалуйста, проверьте рабочий пример ниже, надеюсь, это поможет :)
:root {
--primary-color: hsl(332, 61%, 78%);
}
div {
width: 100px;
height: 100px;
}
.test {
background: var(--primary-color);
}
.icon {
color: var(--primary-color);
fill: currentColor;
width: 64px;
height: 64px;
}<div class = "test">
Testing the css variable color
</div>
<svg class = "icon" xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 129 129">
<path d = "m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z"/>
</svg>Спасибо, что нашли время ответить! Причина, по которой я пошел по пути использования SVG в качестве фона, заключалась в том, чтобы попытаться заменить стрелку раскрывающегося списка в теге select (извините, не указал это в вопросе / коде!) ... Не уверен, используется ли фактический SVG внутри тега у меня сработает. Но полезно знать, что переменные CSS будут работать во встроенных SVG!
в этом случае используйте значки шрифтов, загрузите нужный файл svg в приложение icomoon.io/app/#/select или выберите один из библиотеки значков и сгенерируйте шрифт, тогда вы сможете использовать его так же, как fontawsome, тогда вы будете контролировать цвет. :)
Хорошо, поехали ... Сначала я объясню, почему это не работает, а затем покажу альтернативу.
Почему ваш подход не работает
В вашем примере svg не является частью DOM. Таким образом, вы не можете использовать css для изменения атрибутов svg.
Что вы делаете, так это добавляете встроенный стиль к svg в вашем URL-адресе. Поскольку браузер не распознает --primary-color как цвет, он не работает.
Альтернативный подход
Альтернативный подход - поместить svg в html и подделать фон. Я сделал это, разместив svg в абсолютном положении и переместив его на задний план с помощью z-index.
Обратите внимание, что вам придется изменить svg или позиционирование, чтобы разместить фон так, как вы хотите. Обычно для этого используется размер фона. Но приложив некоторые усилия, вы можете воспроизвести это поведение в svg или лучше позиционировать его с помощью css.
:root {
--primary-color: hsl(332, 61%, 78%);
}
div {
width: 100px;
height: 100px;
}
.test {
background: var(--primary-color);
}
.icon{ /*postion relative for absolute positioning to work*/
position: relative;
}
.icon>svg{
position: absolute;
top: 0px;
right: 0px;
left: 0px;
bottom: 0px;
z-index: -1;
}
.icon>svg>path{ /*target the image with css*/
fill: var(--primary-color);
}<div class = "test">
Testing the css variable color
</div>
<div class = "icon">
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 129 129' id='background'><path d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z'/> </svg>
<p>Text goes here...</p>
</div>Спасибо за Ваш ответ! Очень понятно и помогло мне понять, почему мои переменные CSS не работают. Спасибо за пример, но, к сожалению, не уверен, смогу ли я пойти по этому пути, потому что причина, по которой я пытался использовать SVG в качестве фона, заключалась в том, чтобы заменить раскрывающийся список тегов выбора (ага, с выбором так сложно работать!). Но отличное объяснение :)
Теперь вы можете включить SVG как изображение-маску вместо фона. Не забудьте установить цвет фона из переменных css для блока .icon.
.icon {
background: var(--primary-color);
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 129 129'%3E%3Cpath d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' /%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 129 129'%3E%3Cpath d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' /%3E%3C/svg%3E");
}
Вы можете проверить это в этом CodePan
Вот информация от Caniuse о маске-изображении.
А вот документация о свойстве маски
Лучший ответ имо. Хорошо поддерживается всеми основными браузерами с префиксом -webkit и гораздо меньшим количеством кода для его достижения.
Если вам нужно управлять только одним цветом, вы можете использовать ключевое слово currentColor в свойстве fill и изменить его через свойство css color.
.icon {
color: var(--primary-color);
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 129 129'%3E%3Cpath d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' fill='currentColor' /%3E%3C/svg%3E");
}
К сожалению, currentColor не работает с SVG с кодировкой URL.
<path class = "class-name"/>
:root {
--color : #123456;
}
.class-name {
fill : var(--color)
}
попробуй это
Хотя этот код может предоставить решение вопроса, лучше добавить контекст, объясняющий, почему и как он работает. Это может помочь будущим пользователям изучить и в конечном итоге применить эти знания в своем собственном коде. Вы также, вероятно, получите положительные отзывы / положительные отзывы от пользователей, когда объясните код.
Привет! Да, фон квадрата должен менять цвет в соответствии с переменной CSS (primary-color). Цвет заливки SVG также должен измениться, но в данном случае это не так. Квадрат просто показывает, что к нему применяется цвет переменной CSS :)