Question

部分1- 因此，我在SVG中有一堆<circle>，我希望这些圆圈成为复选框。之后，我想：

部分2- 单击圆1（现在是复选框）时，将选中它。但是其他所有圈子现在都不受限制。

这是我已经尝试过的：

PART 1-将SVG变成一个复选框：

<circle opacity="0.5" cx="842" cy="451.814" r="25.582" class="svg_spot" id="1" fill="#FFB60C" >
        <animate attributeName="r" values="25.582; 33; 25.582" keyTimes="0; 0.5; 1" begin="0s"  dur="1s" repeatCount="indefinite" calcMode="linear" />
        <input type="checkbox" id="spot1" name="spot" class="common_selector spot_id" value="spot1">   
</circle>

PART 2-

$('input[name=spot]').click (function (){
        $(this).attr('checked', true);
        $('input[name=spot]').not(this).attr('checked', false);
});

感谢您的陪伴。不胜感激！

Answer 1

可能无需任何Javascript就可以正常工作。

这是如何工作的：

将SVG放入输入的标签中。单击SVG（即标签）将激活该字段。
使实际的<input>字段不可见，以便您看到的只是标签。
使用:checked伪选择器，根据是否选择了字段来设置SVG的样式。

// just here to prove that the form value is changing
// prints value of spot field when inputs change
document.querySelectorAll("#spot1, #spot2, #spot3")
        .forEach((elem) => elem.addEventListener("change", (evt) => console.log(document.myform.spot.value)));

.common_selector {
  position: absolute;
  opacity: 0;
}

.common_selector + label svg {
  width: 50px;
  height: 50px;
  fill: red;
}

.common_selector:checked + label svg {
  fill: green;
}

<form name="myform">

<input type="radio" id="spot1" name="spot" class="common_selector spot_id" value="spot1">
<label for="spot1">
  <svg viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="50"/>
  </svg>
</label>

<input type="radio" id="spot2" name="spot" class="common_selector spot_id" value="spot2">
<label for="spot2">
  <svg viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="50"/>
  </svg>
</label>

<input type="radio" id="spot3" name="spot" class="common_selector spot_id" value="spot3">
<label for="spot3">
  <svg viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="50"/>
  </svg>
</label>

</form>

Answer 2

<input>不是有效的SVG元素-它是HTML元素，因此将无法使用。您可以：

将输入元素包装在<foreignObject>元素内，然后执行此操作，或者
您可以使用定位将输入元素放置在圆上。但是合理的警告-表单元素位于其他类型的元素上时，它们并不总是发挥良好的作用。或
您可以手动绘制看起来像输入元素的SVG，并使用JavaScript使其表现得像一个。或
由于只需要一个圆，所以为什么不将输入元素包裹在具有适当边界半径的Div中，并用这种方式制作一个圆。

Answer 3

希望我能理解你的问题。您不能将svg元素更改为输入，但是可以尝试模仿一个。

// selects all the circles with a class of radio
let inputs = document.querySelectorAll(".radio")
// for every circle
inputs.forEach(i =>{
  //when the circle is clicked
  i.addEventListener("click", ()=>{
   // remove the class checked from all the circles but the clicked one 
   inputs.forEach(j =>{if(i!==j)j.classList.remove("checked") })
   // toggle the class checked on the clicked one 
   i.classList.toggle("checked")
})
})

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

<svg id="theSVG" viewBox="800 410 300 85" width="300">
<circle class="radio" opacity="0.5" cx="842" cy="451.814" r="25.582"  fill="#FFB60C"  stroke="#FFB60C" stroke-width="10" />   

  
<circle class="radio"  opacity="0.5" cx="950" cy="451.814" r="25.582"  fill="#FFB60C"  stroke="#FFB60C" stroke-width="10" />   
  
<circle class="radio"  opacity="0.5" cx="1050" cy="451.814" r="25.582"  fill="#FFB60C"  stroke="#FFB60C" stroke-width="10" /> 

</svg>

Answer 4

PART 1 ：使用<foreignObect>在SVG中显示任何HTML元素：

<foreignObject x="20" y="20" width="100" height="100">
   <input type="checkbox" id="spot1" name="spot" class="common_selector spot_id" 
   value="spot1">
</foreignObject>

然后，您可以使用CSS隐藏该输入字段的默认样式，并将圆圈放置在该字段上。您可以在这里阅读有关内容：https://www.w3schools.com/howto/howto_css_custom_checkbox.asp

PART 2 ：使用单选按钮而不是复选框。复选框允许多个选择。这里需要单选按钮。在这里阅读：https://www.w3schools.com/tags/att_input_type_radio.asp

如何将<circle>（在svg内）变成一个复选框？

4 个答案: