Добрый день, может кто поделится опытом в создании вот точно
такой штуки. Суть в том, что изображение поделено на 2 цвета. По клику можно менять цвет каждого из двух "частей изображения".
Я понимаю, что все сделано на SVG и просто заливают нужные path. Но вот как на этапе подготовки изображения можно отметить где какая часть изображения? Прописывать вручную не вариант. Как такое делать правильно? Сам алгоритм важен. Под спойлером просто жс-код как реализовано в моем примере.
spoiler$('.tabs-color-1 span').click(function() {
$this = $(this);
var rgb = $(this).css('background-color').match(/\d+/g);
var hex = '#' + String('0' + Number(rgb[0]).toString(16)).slice(-2) + String('0' + Number(rgb[1]).toString(16)).slice(-2) + String('0' + Number(rgb[2]).toString(16)).slice(-2);
var text = $('.right-menu .color-1').find('li.c-' + hex.slice(1)).text();
$('.right-menu .color-1 span').attr('class', 'selected c-' + hex.slice(1)).text(text);
var object = document.getElementById("svg");
var svgDocument = object.contentDocument;
var svgElement = svgDocument.querySelectorAll(":not(.color-2)");
Array.prototype.forEach.call(svgElement, function(item) {
item.setAttribute("fill", hex);
});
});
Но тут я вижу только работу на готовом изображении, в котором уже все "размечено". Именно алгоритм разметки и последующей обработки смены цветов и интересует. Спасибо!
