Как динамически раскрасить импортированный значок SVG в Svelte без фильтров CSS?
У меня возникли проблемы при попытке решить простую задачу: с помощью значка, импортированного в компонент Svelte с помощью импорта активов Vite, как я могу изменить цвет значка?
<script>
// This would be the usual Vite way to import the asset
import icon from "../assets/icon.svg";
// Our dynamic color
export let iconColor = "#c0ffee";
</script>
Прочитав этот вопрос, кажется, что доступно несколько вариантов:
- CSS-фильтры, которые я не хочу использовать, так как они слишком требовательны к производительности, как при рендеринге, так и при вычислении значений для фильтра (т. е., учитывая шестнадцатеричный цвет, получение значений фильтра требует много усилий). Дж.С.).
- Использование свойства маски CSS. Маска должна быть URL-адресом SVG, поэтому кажется, что она не может работать с импортом ресурсов.
- Хороший и простой подход: поместить
fill = "currentColor"в исходный код значка и стилизовать его с помощью свойства CSScolor. Это не работает по несколько сложной причине:
Поскольку значок является импортированным и предназначен для использования с <img src = {icon}/>, а не непосредственно с <svg> элементом, содержимое необходимо будет встроить. Это можно сделать так:
<script>
import icon from "../assets/icon.svg?raw";
</script>
<div> {@html icon} </div>
Полученная скомпилированная страница действительно представляет собой SVG, вложенный в элемент div. Но теперь нет возможности его стилизовать: добавление CSS-селектора svg {} будет считаться «неиспользуемым». У Svelte нет возможности узнать, что находится внутри импортированной нами необработанной HTML-строки, поэтому дерево отбрасывает этот селектор. Кроме того, из-за этого мы не могли применить к значку какой-либо другой стиль, поэтому такие базовые вещи, как установка размера значка, также невозможны.
Использование :global в стиле , как предложено в этом вопросе , также не помогает: поскольку для каждого значка требуется динамический цвет, каждый новый экземпляр этого компонента будет перекрашивать все значки на странице.
Попытка заставить Svelte не трясти дерево терпит неудачу: такие правила, как div > *, также удаляются, и даже добавление пустого <svg style = "display:none"> в div не работает — стиль применяется только к скрытому заполнителю, но не к встроенному SVG.
Возможно, я слишком много об этом думаю, и существует простое решение, которое соответствует критериям «импортировать SVG-ресурс» и «динамически менять его цвет и размер». Буду признателен за любую помощь.
Ответы 1
Когда вы добавляете fill = "currentColor" в svg и встраиваете его через `@html' и div-оболочку, установка цвета в div повлияет на svg.
<script>
const svg = '<svg viewBox = "0 0 100 100" fill = "currentColor" xmlns = "http://www.w3.org/2000/svg"><circle cx = "50" cy = "50" r = "50"></circle></svg>'
export let color = 'teal'
</script>
<div style:color = {color}>
{@html svg}
</div>
Без добавления fill = "currentColor" альтернативным способом было бы использование div-обертки в сочетании с модификатором :global и переменной CSS.
<script>
const svg = '<svg viewBox = "0 0 100 100" xmlns = "http://www.w3.org/2000/svg"><circle cx = "50" cy = "50" r = "50"></circle></svg>'
export let color = 'teal'
</script>
<div style:--color = {color}>
{@html svg}
</div>
<style>
div :global(svg) {
fill: var(--color);
}
</style>
Спасибо, решение 1 хорошее, но не позволяет стилизовать что-либо еще в самом SVG (например, высоту/ширину), но решение 2 — это именно то, что я искал. Я не знал, что
:globalможно использовать только для одной части селектора. Делает код читаемым и понятным, в отличие от обходных путей с фильтрами.