Значения SVG отправляются в базу данных ... из формы

Question

Я пытаюсь сделать зуб svg кликабельным и отправить значение зуба клика в мою базу данных .. как это сделать /?

я пытался добавить css к своему svg, но наведение не работает .. даже если я нацеливаюсь на класс "path".

.toothdiv {
  background:linear-gradient(141deg, #0fb8ad 0%, #1fc8db 51%, #2cb5e8 75%);
  width: 100%;
  height: 500px;
  margin: auto;
}
a path:hover{
  fill:red;
}
```SVG
<svg class="toothdiv"



<!-- 1 -->
<a href="#" class="ako" xlink:title="3rd Molar" >   

Я ожидаю добавить эффект наведения, когда указатель мыши находится в верхней части пути svg.

Answer 1

Основная идея заключается в следующем: у каждого зуба есть идентификатор и есть вход (введите текст в этом примере - , вы можете сделать так, чтобы он набрал hidden) с аналогичным идентификатором. Например, если идентификатор зуба id="_3m", есть вход, идентификатор которого равен id="input_3m". Также зуб имеет атрибут data-value. Когда пользователь щелкает зуб, значение data-value появляется в качестве значения ввода. Я надеюсь, что это помогает.

//the array of teeth
let teeth = Array.from(document.querySelectorAll("circle"))
//for each tooth
teeth.forEach(c=>{
  //get the id of the tooth
  let theId = c.id;
  
  // get the vinculated input
  let theinput = document.querySelector("#input"+theId);
  //on click
  c.addEventListener("click",()=>{
    //add the class selected to the tooth
    c.setAttribute("class","selected")
    theinput.value = c.dataset.value
  })
  
  
})

svg{border:1px solid}
.selected{fill:red}

<svg> 
  <circle id="_3m" data-value ="3rd molar" cx="150" cy="75" r="7" />
  <circle id="_4m" data-value ="4rd molar" cx="165" cy="75" r="7" />
</svg>

<form action="http://foo.com" method="post">
  <input type="text" id="input_3m" />
  <input type="text" id="input_4m" />
  <button>Send the file</button>
</form>