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

В HTML атрибут fill в элементе <path> SVG определяет цвет заливки контура фигуры. Чтобы управлять значением атрибута fill внутри background: url() псевдо-элемента, можно использовать CSS.

1. Прежде всего, убедитесь, что ваш псевдо-элемент создан и связан с родительским элементом. Например, вы можете использовать псевдокласс ::before или ::after.

2. Затем задайте путь SVG и его параметры в качестве значения свойства content для псевдо-элемента. Например:

.my-element::before {
  content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><path d="M50 0 L100 100 L0 100 Z" fill="#ff0000"></path></svg>');
}

3. В этом коде мы используем data:image/svg+xml, чтобы создать URL-адрес, в котором содержится SVG-изображение. В значении content мы вставляем этот URL-адрес, заменяя #ff0000 на любой цвет, который вы хотите использовать.

4. Чтобы управлять значением атрибута fill динамически, вы можете использовать CSS переменные. Например:

.my-element::before {
  --custom-color: #ff0000;
  content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><path d="M50 0 L100 100 L0 100 Z" fill="var(--custom-color)"></path></svg>');
}

5. Для динамического изменения значения переменной вы можете использовать JavaScript:

const element = document.querySelector('.my-element');
element.style.setProperty('--custom-color', '#00ff00');

В результате, при добавлении и удалении класса .my-element, будет меняться значение цвета заливки fill в элементе <path> внутри background: url().