Javascript Color Visualizer - 存在多个路径和选择的问题

Question

我正在为朋友解决这个问题，但遇到了一些问题。我用

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 的不同路径并允许它们独立着色，但也希望为每个路径选择的颜色突出显示并保存在不同的路径选择中（即，如果我选择门，然后是红色，然后去修剪并返回门，红色样本仍应突出显示）。

我会是第一个说代码不完整且有问题的人，但我对 javascript 不太擅长，这让我有一段时间很烦。

Answer 1

只是一点点改变

您在开始时仅在代码中确定一次overlay。所以它不会改变，如果你点击左边的按钮。

我将它转换为一个返回值的函数，然后使用该函数

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

 function overlay() { return 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>