Я выбираю красный цвет, затем, если я нажимаю на верхнем левом углу второго изображения, он становится красным

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, а затем изменить свойство fill css для элементов SVG.

(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>