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>