Я возился с этим для друга, и у меня возникли некоторые проблемы. Я использую
https://codepen.io/dinos6/pen/XWbBMOw
Это то, что я имею до сих пор:
var svgname = ('Trim-shape');
var sec = document.getElementsByClassName("section");
for (var i = 0; i < sec.length; i++) {
sec[i].onclick = changeSection;
}
function changeSection(e) {
// get the section name
let secname = e.target.getAttribute("data-text");
// document.write (secname);
svgname = secname;
// document.write (svgname);
}
// Reference the color shape that was drawn over the image
var overlay = document.getElementById(svgname);
// Click on a color
var el = document.getElementsByClassName("color");
for (var i = 0; i < el.length; i++) {
el[i].onclick = changeColor;
}
function changeColor(e) {
// get the hex color
let hex = e.target.getAttribute("data-hex");
// set the hex color
overlay.style.fill = hex;
}
body,
html {
margin: 0;
padding: 0;
height: 100%;
}
*,
*:before,
*:after {
box-sizing: border-box;
}
#container {
position: relative;
}
#Siding-svg {
position: relative;
z-index: 2;
mix-blend-mode: multiply;
}
#Siding-shape {
fill: #0009a2;
}
#Trim-svg {
position: relative;
z-index: 2;
mix-blend-mode: multiply;
}
#Trim-shape {
fill: #fff8a2;
}
#Door-svg {
position: relative;
z-index: 2;
mix-blend-mode: multiply;
}
#Door-shape {
fill: #b90500;
}
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
z-index: 1;
}
.colors {
display: flex;
position: fixed;
bottom: 2em;
right: 2em;
z-index: 3;
}
.color {
height: 36px;
width: 36px;
margin-left: 0.5em;
border-radius: 18px;
box-shadow: 0px 4px 10px rgba(0,0,0,0.3);
border: 2px solid #aaa;
cursor: pointer;
}
.building {
display: flex;
position: fixed;
bottom: 2em;
left: 2em;
z-index: 3;
}
.section {
height: 50px;
width: 75px;
margin-left: 0.5em;
border-radius: 18px;
box-shadow: 0px 4px 10px rgba(0,0,0,0.3);
border: 2px solid #aaa;
cursor: pointer;
}
<div id="container">
<svg id="Siding-svg" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1169 673">
<path id="Siding-shape" d="M733 290l-274 42 1 217 179 4-1-115 90-3 2 122h17l-5-269-9 2z M780 272l-428-84-232 180v10l140-19v-45s43-28 78-36 43-10 80-8 42 8 42 8l1 48 275-43 1-5z M259 363l-135 20v160l138 2V365l-3-2z M1098 388L747 288l3 269 352-47-4-122z" />
<svg id="Trim-svg" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1169 673">
<path id="Trim-shape" d="M777 225l-4 17-463-82L59 368v-9l251-211 467 77z" />
<svg id="Door-svg" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1169 673">
<path id="Door-shape" d="M278 320v290l181 16-4-343s-55-10-86 0-43 9-91 37z" />
</svg>
<img id="background-image" src="https://images2.imgbox.com/ca/36/PUSVCKm8_o.png" alt="">
</div>
<div class="colors">
<div class="color" style="background-color: #e1e851" data-hex="#e1e851"></div>
<div class="color" style="background-color: #8cd147" data-hex="#8cd147"></div>
<div class="color" style="background-color: #4a9ccf" data-hex="#4a9ccf"></div>
<div class="color" style="background-color: #661f45" data-hex="#661f45"></div>
<div class="color" style="background-color: #1e2024" data-hex="#1e2024"></div>
</div>
<div class="building">
<div class="section" style="background-color: #333333" data-text="Siding-shape">Siding</div>
<div class="section" style="background-color: #444444" data-text="Trim-shape">Trim</div>
<div class="section" style="background-color: #555555" data-text="Door-shape">Door</div>
</div>
Я использовал этот учебник, чтобы начать:
https://tympanus.net/codrops/2019/09/03/how-to-dynamically-change-the-colors-of-product-images-using-css-blend-mode-and-svg/
Я хочу, чтобы кнопки слева выбирали разные пути SVG и позволяли им окрашиваться независимо, а также чтобы цвет, выбранный для каждого пути, выделялся и сохранялся при выборе различных путей (т. Е. Если я выбрал дверь, то красный, а затем go, чтобы обрезать и вернуться к двери, красный образец все еще должен быть выделен).
Я буду первым, кто скажет, что код неполный и глючный, но я не очень хорош с javascript и это меня уже некоторое время раздражает.