"Designer" goods in the svg with the change of colors and easy preparation of images?


Warning: count(): Parameter must be an array or an object that implements Countable in /home/styllloz/public_html/qa-theme/donut-theme/qa-donut-layer.php on line 274
0 like 0 dislike
9 views
Good day, can anyone share their experience in creating exactly such a thing. The point is that the image is divided into 2 colors. By clicking you can change the color of each of the two "parts of the image".

5ae99bd6715e0838473070.jpeg

I understand that everything is done on SVG and just pour the desired path. But how in the preparation phase image where you can mark what part of the image? To register manually is not an option. How is this done? The algorithm is important. Under spoiler just JS-code as implemented in my example.

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); }); });
by | 9 views

1 Answer

0 like 0 dislike
Because svg is generated in Adobe Illustrator, it says
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->

There, if you look, there are two groups #g521 (land) and #g819 (animals). Selector:
#g819 path { fill: red; }

What's not clear, if simple.

Link to svg https://chatte.com.ua//upload/iblock/8d2/8d21ed385...
by

Related questions

0 like 0 dislike
1 answer
0 like 0 dislike
1 answer
0 like 0 dislike
2 answers
0 like 0 dislike
1 answer
0 like 0 dislike
1 answer
110,608 questions
257,186 answers
0 comments
35,534 users