Масштабируемая векторная графика (SVG) великолепна. Они быстрые, бесконечно масштабируемые, поддерживаются всеми основными браузерами и могут свободно использоваться кем угодно. Короче говоря, это формат изображения для Интернета.

Недавно при разработке моего нового веб-сайта Tailwindize я, очевидно, выбрал использование SVG. Tailwindize отображает динамически окрашенные превью компонентов веб-сайта. Поскольку один из этих элементов включает в себя SVG, мне нужно было найти способ изменить цвет указанного SVG с помощью JavaScript.

Код для этого изображения выглядит примерно так:

Во-первых, вам нужно получить шестнадцатеричный код цвета, который вы хотите заменить. Это можно сделать, открыв изображение в программе редактирования изображений, такой как Inkscape или GIMP. В случае примера изображения шестнадцатеричный цвет фиолетового цвета равен #6c63ff.
Вы также должны будете добавить имя класса к каждой строке, ссылающейся на цвет.

Затем вставьте SVG на веб-страницу следующим образом:

<object id="color-change-svg" data="path/to/svg.svg" type="image/svg+xml" ></object>

Использование тега object необходимо, поскольку JavaScript не может управлять изображениями внутри тегов img.

Чтобы заменить цвет SVG, мы будем использовать немного кода JavaScript:

function changeSVGColor(color) { var svg = document.getElementById("color-change-svg").contentDocument; var elements = svg.getElementsByClassName("primaryColor"); for (var i = 0; i < elements.length; i++) elements[i].style.fill = color; }

Вы можете запустить эту функцию в любом месте вашего кода (но, конечно, она должна быть запущена на стороне клиента) и передать ей новый цвет. Функция сначала получает SVG по его идентификатору color-change-svg, а затем перебирает все его элементы с классом, который мы назначили ранее ("primaryColor"). Для каждого из этих элементов заменяется цвет.

Я надеюсь, что этот пост был полезен для вас и ценю все отзывы!

Взгляните на Tailwindize для рабочего примера изменяющего цвет SVG.

Первоначально опубликовано на https://quoorex.com 3 марта 2021 г.