1

This is my actual output

enter image description here

This is the picture I want to do but I don't know how to do it.

enter image description here

HTML and svg Code :

 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>

In select color, if I select the red color the image I want to fill it becomes red.

For Example, I select a red color then if I click the upper left in the second image it becomes red.

I know this is the Javascript function but I don't know how to do.

anony
  • 42
  • 7

1 Answers1

2

You can attach a click event listener and then change the fill css property for SVG elements.

(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>
Nidhin Joseph
  • 9,981
  • 4
  • 26
  • 48
  • It works thanks. Can I ask one another question it is possible to save the image to the database after picking the color? – anony Feb 26 '20 at 01:21
  • 1
    yes you can, need to convert svg to a base64 and then store. [check here](https://stackoverflow.com/questions/28450471/convert-inline-svg-to-base64-string) – Nidhin Joseph Feb 26 '20 at 01:22
  • Sir, can you give me the example please Sorry, I'm a beginner and just a student my professor give the project to how to create a dental chart. – anony Feb 26 '20 at 01:27
  • What does not work? You need to store the value in a variable and then send it to your server. – Nidhin Joseph Feb 26 '20 at 11:20
  • the console.log sir didn't display the value after I clicking the button – anony Feb 26 '20 at 11:26
  • function saveAsBase64() { let str = `data:image/svg+xml;base64,${window.btoa(new XMLSerializer().serializeToString(document.getElementById("svg")))}`; console.log(str); } – anony Feb 26 '20 at 11:26
  • Uncaught TypeError: Failed to execute 'serializeToString' on 'XMLSerializer': parameter 1 is not of type 'Node'. at saveAsBase64 (blank.html:58) at HTMLButtonElement.onclick (blank.html:33) saveAsBase64 @ blank.html:58 onclick @ blank.html:33 – anony Feb 26 '20 at 11:34
  • please check your code, did you forget `id="svg"` on your `svg` tag? – Nidhin Joseph Feb 27 '20 at 01:47
  • thanks, sir the base64 is already shown but I don't know how to connect to the database – anony Feb 29 '20 at 15:53
  • connecting to db is a different scope altogether, can you please raise that as a different question? – Nidhin Joseph Mar 04 '20 at 05:11