Question

我正在尝试制作一个可单击的svg牙齿，并将所单击的牙齿值发送到我的数据库..该怎么做/？

我试图将css添加到我的svg中，但是即使我将“路径”类定位为目标，悬停也无法正常工作。

.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

主要思想是：每个牙齿都有一个ID，并且有一个输入（在此示例中键入文本-您可以使它们键入hidden ），并且具有相似的ID。例如，如果牙齿ID为id="_3m"，则输入ID为id="input_3m"。牙齿也具有数据值属性。当用户单击牙齿时，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>

SVG值从表单提交到数据库...

1 个答案: