Блог

Главная - Вопросы по программированию - Как изменить цвета встроенного svg, упакованного с помощью webpack?

Как изменить цвета встроенного svg, упакованного с помощью webpack?

#css #svg #webpack

#css #svg #webpack

Вопрос:

Я пробовал разные вещи, и они всегда получаются черными.

У меня есть этот svg:

 <!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
  <title>power-cord</title>
  <path d="M32 8.828l-2.828-2.828-5.586 5.586-3.172-3.172 5.586-5.586-2.828-2.828-5.586 5.586-3.586-3.586-2.707 2.707 16 16 2.707-2.707-3.586-3.586 5.586-5.586z"></path>
  <path d="M24.814 21.056l-13.87-13.87c-2.994 3.591-6.391 9.139-4.044 13.913l-4.133 4.133c-0.972 0.972-0.972 2.563 0 3.535l0.464 0.464c0.972 0.972 2.563 0.972 3.536 0l4.133-4.133c4.774 2.348 10.322-1.049 13.913-4.043z"></path>
</svg>

Webpack / Quasar / Vue упаковывает и доставляет его в этот тег изображения:

 <img src="data:image/svg xml;base64,PCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIiB2aWV3Qm94PSIwIDAgMzIgMzIiPgogIDx0aXRsZT5wb3dlci1jb3JkPC90aXRsZT4KICA8cGF0aCBkPSJNMzIgOC44MjhsLTIuODI4LTIuODI4LTUuNTg2IDUuNTg2LTMuMTcyLTMuMTcyIDUuNTg2LTUuNTg2LTIuODI4LTIuODI4LTUuNTg2IDUuNTg2LTMuNTg2LTMuNTg2LTIuNzA3IDIuNzA3IDE2IDE2IDIuNzA3LTIuNzA3LTMuNTg2LTMuNTg2IDUuNTg2LTUuNTg2eiI PC9wYXRoPgogIDxwYXRoIGQ9Ik0yNC44MTQgMjEuMDU2bC0xMy44Ny0xMy44N2MtMi45OTQgMy41OTEtNi4zOTEgOS4xMzktNC4wNDQgMTMuOTEzbC00LjEzMyA0LjEzM2MtMC45NzIgMC45NzItMC45NzIgMi41NjMgMCAzLjUzNWwwLjQ2NCAwLjQ2NGMwLjk3MiAwLjk3MiAyLjU2MyAwLjk3MiAzLjUzNiAwbDQuMTMzLTQuMTMzYzQuNzc0IDIuMzQ4IDEwLjMyMi0xLjA0OSAxMy45MTMtNC4wNDN6Ij48L3BhdGg Cjwvc3ZnPgo=" class="profile">

Круто!

Теперь я должен иметь возможность раскрасить его с помощью fill ? В Chrome devtools я вижу, что применяются атрибуты заливки (через CSS и манипулирование с ним)

 <img src="data:image/svg xml;base64,PCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIiB2aWV3Qm94PSIwIDAgMzIgMzIiPgogIDx0aXRsZT5wb3dlci1jb3JkPC90aXRsZT4KICA8cGF0aCBkPSJNMzIgOC44MjhsLTIuODI4LTIuODI4LTUuNTg2IDUuNTg2LTMuMTcyLTMuMTcyIDUuNTg2LTUuNTg2LTIuODI4LTIuODI4LTUuNTg2IDUuNTg2LTMuNTg2LTMuNTg2LTIuNzA3IDIuNzA3IDE2IDE2IDIuNzA3LTIuNzA3LTMuNTg2LTMuNTg2IDUuNTg2LTUuNTg2eiI PC9wYXRoPgogIDxwYXRoIGQ9Ik0yNC44MTQgMjEuMDU2bC0xMy44Ny0xMy44N2MtMi45OTQgMy41OTEtNi4zOTEgOS4xMzktNC4wNDQgMTMuOTEzbC00LjEzMyA0LjEzM2MtMC45NzIgMC45NzItMC45NzIgMi41NjMgMCAzLjUzNWwwLjQ2NCAwLjQ2NGMwLjk3MiAwLjk3MiAyLjU2MyAwLjk3MiAzLjUzNiAwbDQuMTMzLTQuMTMzYzQuNzc0IDIuMzQ4IDEwLjMyMi0xLjA0OSAxMy45MTMtNC4wNDN6Ij48L3BhdGg Cjwvc3ZnPgo=" class="profile" style="
    fill: purple;
    color: purple;
">

Но маленький парень всегда отображается черным:-(

Редактирование и переупаковка svg с fill="purple" помощью works. With fill="var(--q-color-primary)" не использует переменные CSS.

 <!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
  <title>power-cord</title>
  <path fill="var(--q-color-primary)" d="M32 8.828l-2.828-2.828-5.586 5.586-3.172-3.172 5.586-5.586-2.828-2.828-5.586 5.586-3.586-3.586-2.707 2.707 16 16 2.707-2.707-3.586-3.586 5.586-5.586z"></path>
  <path fill="purple" d="M24.814 21.056l-13.87-13.87c-2.994 3.591-6.391 9.139-4.044 13.913l-4.133 4.133c-0.972 0.972-0.972 2.563 0 3.535l0.464 0.464c0.972 0.972 2.563 0.972 3.536 0l4.133-4.133c4.774 2.348 10.322-1.049 13.913-4.043z"></path>
</svg>

У меня будет 100 таких изображений, которые нужно раскрасить в разные темы, и мне бы понравился простой конвейер ресурсов.

Какой самый простой способ динамически изменять цвета этих изображений после их упаковки?

Заранее спасибо!

Ответ №1:

Вы не можете делать то, что хотите.

Изображения, загружаемые через URL-адрес данных, обрабатываются так, как если бы они были файлом изображения в другой файловой системе. После декодирования и визуализации они фактически представляют собой растровое изображение — такое же, как если бы они были PNG.

Ваши варианты:

  • Встроить SVG в свой HTML
  • Используйте an <object> для встраивания SVG и изменения стилей с помощью JS
  • Используйте JS-код, который заменяет ваши <img> теги на введенные SVG из связанного файла.
  • Создайте несколько версий SVG с разными цветами (либо в виде отдельных SVG-файлов, либо с помощью SVG-спрайтового листа).

Re: встроенный svg против шрифтов значков, в этой статье хорошо подводится итог: «Если вы можете использовать IE 9 / Android 3 , встроенный SVG лучше практически во всем, чем шрифты значков».

Комментарии:

1. Хорошо, привязка. Есть ли какая-либо причина предпочесть шрифт значка (например, icomoon. io) на встроенный svg? Я хочу поддерживать IE11 и мобильные устройства для PWA.

2. Я думаю, это вопрос мнения. Но я думаю, что консенсус сейчас движется в сторону SVGs. Эта статья может помочь: css-tricks.com/icon-fonts-vs-svg

3. Потрясающе! Отличная статья с подробным обзором. TL; DR: «Если вы можете использовать IE 9 / Android 3 , встроенный SVG лучше практически во всем, чем шрифты значков».

4. ну, @PaulLeBeau, разве не было бы возможности написать пользовательский загрузчик, который теоретически мог бы преобразовать ресурс до создания «asset / inline», я думаю, из SCSS / CSS и т. Д. (не из шаблона) для правила css background-image: url(../Icons/magnifier.svg?fill=f0famp;color=0f0); загрузчик, вероятно, мог бы предварительно обработать его. Это было бы очень удобно. Прямо сейчас я встраиваю svg: s без строки запроса, это было бы хорошим дополнением к моему текущему рабочему процессу.

5. @JonasCarlbaum Да. Вы могли бы написать препроцессор. Или вы можете заменить фоновое изображение во время выполнения с помощью JS. Для последнего варианта уже есть пример кода — по крайней мере, для <img> любого. Не уверен background-image .