javascript - 我选择红色，然后如果我单击第二张图像的左上角，它就会变成红色

Question

这是我的实际输出

这是我想做的图片，但我不知道怎么做。

HTML 和 svg 代码:

 td style="width: 5%;"><svg class="teeth" 
 width="400px" height="300px" viewBox="0 0 400 300" preserveAspectRatio="xMidYMid meet">
    <!-- upper right 8 -->
    <g id="molar-group" class="molar">
        <rect x="75" y="75" stroke="black" id="disto-occlusal" style="stroke-width: 5px;" width="125" height="150" fill="white"/>
        <rect x="200" y="75" stroke="black" id="mesio-occlusal" style="stroke-width: 5px;" width="125" height="150" fill="white"/>

        <polygon stroke="black" id="disto-buccal" style="stroke-width: 5px;" points="0 0 200 0 200 75 75 75" fill="white" />
        <polygon stroke="black" id="mesio-buccal" style="stroke-width: 5px;" points="200 0 400 0 325 75 200 75" fill="white" />

        <polygon stroke="black" id="mesial" style="stroke-width: 5px;" points="400 0 400 300 325 225 325 75" fill="white" />

        <polygon stroke="black" id="mesio-palatal" style="stroke-width: 5px;" points="400 300 200 300 200 225 325 225" fill="white" />
        <polygon stroke="black" id="disto-palatal" style="stroke-width: 5px;" points="200 300 0 300 75 225 200 225" fill="white" />

        <polygon stroke="black" id="distal" style="stroke-width: 5px;" points="0 300 0 0 75 75 75 225" fill="white" />
    </g>
</svg></td>

<td>
  <select class="color" id="color">  
              <option value="" >Select Color</option>
              <option value="black" >Black</option> 
              <option value="red" >Red</option> 
      </select> 
</td>

在选择颜色中，如果我选择红色，我想要填充的图像就会变成红色。

例如，我选择红色，然后如果我单击第二张图像的左上角，它就会变成红色。

我知道这是 Javascript 函数，但我不知道该怎么做。

Answer 1

您可以附加一个 click 事件监听器，然后更改 SVG 元素的 fill css 属性。

(function() {
  var select = document.getElementById('color');
  document.querySelectorAll('svg g *').forEach(el => {
    el.addEventListener('click', function() {
      this.style.fill = select.value;
    });
  });
})();

function saveAsBase64() {
  let str = `data:image/svg+xml;base64,${window.btoa(new XMLSerializer().serializeToString(document.getElementById("svg")))}`;
  console.log(str);
}

<svg id="svg" class="teeth" width="200px" height="150px" viewBox="0 0 400 300" preserveAspectRatio="xMidYMid meet">
    <!-- upper right 8 -->
    <g id="molar-group" class="molar">
        <rect x="75" y="75" stroke="black" id="disto-occlusal" style="stroke-width: 5px;" width="125" height="150" fill="white"/>
        <rect x="200" y="75" stroke="black" id="mesio-occlusal" style="stroke-width: 5px;" width="125" height="150" fill="white"/>

        <polygon stroke="black" id="disto-buccal" style="stroke-width: 5px;" points="0 0 200 0 200 75 75 75" fill="white" />
        <polygon stroke="black" id="mesio-buccal" style="stroke-width: 5px;" points="200 0 400 0 325 75 200 75" fill="white" />

        <polygon stroke="black" id="mesial" style="stroke-width: 5px;" points="400 0 400 300 325 225 325 75" fill="white" />

        <polygon stroke="black" id="mesio-palatal" style="stroke-width: 5px;" points="400 300 200 300 200 225 325 225" fill="white" />
        <polygon stroke="black" id="disto-palatal" style="stroke-width: 5px;" points="200 300 0 300 75 225 200 225" fill="white" />

        <polygon stroke="black" id="distal" style="stroke-width: 5px;" points="0 300 0 0 75 75 75 225" fill="white" />
    </g>
</svg>


<select class="color" id="color">
  <option value="red">Red</option>
  <option value="black">Black</option>
</select>

<button onclick="saveAsBase64()">Save as Base64</button>