Как управлять значением атрибута fill path svg внутри background: url() псевдо-элемента?

Question

[js-newbie]

Нужно управлять значением атрибута fill элемента path svg вложенного в псевдо-элемент ::before через свойство background: url()

#target::before {background: url("data:image/svg+xml;charset=utf-8,%3Csvg ... path ... %3C/svg%3E");}

Для такого вложения эти правила не работают:
#target svg path {fill:#f00;}
#target::before svg path {fill:#f00;}

Смысл в том, что у меня десять вариантов закрашивания и я пытаюсь задать эти варианты так:

[data-color="f00"] #target svg path {fill:#f00;}
[data-color="0f0"] #target svg path {fill:#0f0;}
[data-color="00f"] #target svg path {fill:#00f;}
и т.д.
(data-color меняется через js)

Но это бесполезно. Додумался только описывать каждый вариант полностью:

[data-color="f00"] #target::before {background: url("data:image/svg+xml ... path ... fill='%23f00 ... ");}
[data-color="0f0"] #target::before {background: url("data:image/svg+xml ... path ... fill='%230f0 ... ");}
[data-color="00f"] #target::before {background: url("data:image/svg+xml ... path ... fill='%2300f ... ");}
и т.д.

Но получается страшное нагромождение. Может быть есть более изящный способ?

Comments

[Вадим]

как на счёт css переменных и js? Или принципиально css?

[js-newbie]

Вадим, а чуть-чуть подробнее про переменные и js? CSS не принципиально, но если js получается сложный, то я лучше оставлю как есть.

[RAX7]

js-newbie, никак, придется вставлять сам svg элемент на страницу, а не псевдо с фоном.

[Ankhena]

Может, вам подойдут маски без вот этих заморочек?
https://codepen.io/noahblon/post/coloring-svgs-in-...

[js-newbie]

Ankhena, Спасибо огромное! Это именно то, что нужно, легко и просто.

Answer 1

[js-newbie]

Благодаря наводке Ankhena нашёл идеальное решение на чистом CSS - использование mask-image.

Рабочий вариант выглядит так:

#target::before {-webkit-mask-image: url("data:image/svg+xml; ... ");}

[data-color="f00"] #target::before {background-color:#f00;}
[data-color="0f0"] #target::before {background-color:#0f0;}
[data-color="00f"] #target::before {background-color:#00f;}
и т.д.
(data-color меняется через js)

Comments

[Ankhena]

Зачем вам data, когда есть кастомные свойства и не надо всю эту дичь писать.