Изменение нескольких цветов объекта SVG

Question

У меня есть логотип SVG, который отображается на холсте с использованием fabric.js, оригинальный SVG имеет черный цвет, но мне нужно, чтобы пользователь мог изменять цвет каждой из частей логотип, в результате чего объект с несколькими цветами, например:

wikimediauruguay.org/images/5/53/Wikimedia-logo.png

Как я могу добиться этого? Если я просто использую object.setFill(), он меняет цвет всего объекта, но мне нужно изменить цвет каждой части отдельно на любые цвета, которые пользователь выбирает. Благодарю.

EDIT: нашел решение, только что опубликовал мой ответ ниже, если у кого-то еще есть тот же вопрос.

Answer 1

Может быть кто-то, кто знает что-то о fabric.js бы ответить таким образом, что имеет смысл для вашего случая, но с простым старым SVG, объект часто <g< элемент с вещами (например, <rect>, <path>, <ellipse>) внутри , Каждый ребенок в группе, может иметь свой собственный обработчик события:

<g> 
    <path onclick='handle(evt)' attrs=stuff /> 
    <rect onclick='handle(evt)' attrs=stuff /> 
    <circle onclick='handle(evt)' attrs=stuff /> 
</g> 

Функция активируется нажатием затем может опрашивать evt.target, чтобы увидеть, какие из подэлементов получил щелчок, Сорта, как это: если (ЭВТ .target.nodeName == "path") {evt.target.setAttribute ("fill", "purple")}

Answer 2

Решительная задача mi очень просто: мне просто нужно было отредактировать SVG на Illustrator, чтобы каждая цветная часть логотипа будет находиться на другом слое, а затем, когда я загружу SVG через fabric.loadSVGFromURL(), каждый слой будет обрабатываться как другой объект fabric.js, тогда я мог бы редактировать каждый объект (слой) отдельно (setFill() и т. д.).