Можно ли использовать переменные CSS внутри встроенного SVG? - PullRequest
Новая
       54

Можно ли использовать переменные CSS внутри встроенного SVG?

0 голосов
/ 29 декабря 2018

Я пишу стиль пользователя для веб-сайта, я использую переменные CSS для конфигурации пользователем.Я пытаюсь использовать встроенный svg с переменной в нем, чтобы создать галочку, установленную для предпочтительного цвета акцента пользователя.Но, похоже, это не работает.

В предоставленном коде я просто заклинило в функции var, но я также попытался установить цвет обводки на currentColor и установить цвет элемента напеременная.Настройка маски и цвета фона работает, но я хочу решение "inline svg". 

.checkmark {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="12">\
    <path fill="none" stroke="var(--ColAccent)" stroke-width="3" d="M1.99609375 5.7835338l3.70287382 3.7028738L14.1853752 1"/>\
</svg>');
}

Галочка должна быть акцентного цвета.Когда я устанавливаю его, просто вставляя var (), он не работает и прозрачен.Интересно, что при использовании метода currentColor обводка будет черной.

1 Ответ

0 голосов
/ 29 декабря 2018

Это работает: 

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="12" style="--ColAccent:red">
    <path fill="none" style="stroke:var(--ColAccent)" stroke-width="3" d="M1.99609375 5.7835338l3.70287382 3.7028738L14.1853752 1"/>
</svg>

Это не работает: 

background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='--ColAccent:red' width='16' height='12'%3E%3Cpath fill='none' style='stroke:var(--ColAccent)' stroke-width='3' d='M1.99609375 5.7835338l3.70287382 3.7028738L14.1853752 1'/%3E%3C/svg%3E%0A")'

Для решения вашей проблемы я бы использовал javascript: 

let _checkmark = document.querySelector(".checkmark");
let ColAccent = _checkmark.style.getPropertyValue("--ColAccent");
_checkmark.style.backgroundImage = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12'%3E%3Cpath fill='none' stroke='${ColAccent}' stroke-width='3' d='M1.99609375 5.7835338l3.70287382 3.7028738L14.1853752 1'/%3E%3C/svg%3E%0A")`
.checkmark {
  width:100px;
  height:100px;
  border:1px solid;
}
<div class="checkmark" style="--ColAccent:skyBlue" ></div>
...