Интерполировать переменную SCSS (sass) внутри SVG, чтобы изменить цвет

Question

Я пытаюсь анимировать состояние элемента, изменяя цвет фона svg.

Чтобы было проще, я пытаюсь интерполировать переменную SCSS (Sass) #{$scss-variable} внутри SVG.

Конечно, курс не работает, вероятно, раньше нужна была какая-то форма кодирования, поэтому я ищу функцию scss, которая может это сделать.

.span {
background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%
    2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20448%22%20enable-background%3D%22new%200%200%20256%20448%22%3E%3Cstyle%
    20type%3D%22text%2Fcss%22%3E.arrow%7Bfill%3A@**#{$scss-variable}**%3B%7D%3C%2Fstyle%3E%3Cpath%20class%3D%22arrow%22%20d%3D%22M25
    5.9%20168c0-4.2-1.6-7.9-4.8-11.2-3.2-3.2-6.9-4.8-11.2-4.8H16c-4.2%200-7.9%201.6-11.2%204.8S0%20163.8%200%20168c0%20
    4.4%201.6%208.2%204.8%2011.4l112%20112c3.1%203.1%206.8%204.6%2011.2%204.6%204.4%200%208.2-1.5%2011.4-4.6l112-112c
    3-3.2%204.5-7%204.5-11.4z%22%2F%3E%3C%2Fsvg%3E%0A");

}

---

<span>aas</span>

Answer 1

Я бы экспортировал SVG через Illustrator после его расширения. Вот пример того, как это сделать.

После того, как вы создадите SVG, вы можете добавить его в свой HTML, фактически включив элемент SVG непосредственно в HTML, или отобразить его с помощьютег изображения (я обычно помещаю его прямо в HTML).

SVG состоит из векторных фигур.Эти фигуры называются либо <circle>, <line>, <square>, либо <paths>.

Чтобы изменить цвет пути, все, что вам нужно сделать, это нацелиться на него с помощью CSS и изменить fill свойство элемента.Если вы хотите изменить внешнюю подкладку элемента, вы редактируете атрибуты stroke и stroke-width.

Если вы хотите анимировать изменение цвета, вы можете сделать это с помощью анимации ключевого кадра, как показаноздесь .