javascript - 单击单选按钮后如何自动添加颜色？

Question

这是我当前的 svg 图表

这是我想要的如果单击单选按钮，该框将自动填充为黑色。

这是我的盒子 svg 代码

<svg class="teeth" id="svg" 
 width="400px" height="300px" viewBox="0 0 400 300" preserveAspectRatio="xMidYMid meet">
    <!-- upper right 8 -->
    <g id="premolar-group">
        <rect x="75" y="75" stroke="black" id="occlusal" style="stroke-width: 5px;" width="150" height="150" fill="white"/>
        <polygon stroke="black" id="buccal" style="stroke-width: 5px;" points="0 0 300 0 225 75 75 75" fill="white" />
        <polygon stroke="black" id="mesial" style="stroke-width: 5px;" points="300 0 300 300 225 225 225 75" fill="white" />
        <polygon stroke="black" id="palatal" style="stroke-width: 5px;" points="300 300 0 300 75 225 225 225" fill="white" />
        <polygon stroke="black" id="distal" style="stroke-width: 5px;" points="0 300 0 0 75 75 75 225" fill="white" />
        <polygon stroke="black" class="distal cross1" style="stroke-width: 5px;" fill="white" />
        <polygon stroke="black" class="distal cross2" style="stroke-width: 5px;" fill="white" />

<input type="radio" name="browser" value="Y" id="answer">


    </g>

</svg>

任何人都可以帮助如何在单击单选按钮时用黑色填充该框吗？

Answer 1

您首先需要获取 SVG 中要更新的元素。在您的情况下，它看起来就像您的所有 polygon 和 rect 元素。

完成后，您可以使用 fill 属性为元素着色。

const radioButton = document.getElementById('answer');
radioButton.addEventListener('change', e => {
  if (e.target.value === 'Y') {
    const polygons = document.querySelectorAll('svg polygon, svg rect');
    polygons.forEach(p => p.setAttribute('fill', 'red') );
  }
});

<svg class="teeth" id="svg" width="400px" height="300px" viewBox="0 0 400 300" preserveAspectRatio="xMidYMid meet">
    <!-- upper right 8 -->
    <g id="premolar-group">
        <rect x="75" y="75" stroke="black" id="occlusal" style="stroke-width: 5px;" width="150" height="150" fill="white"/>
        <polygon stroke="black" id="buccal" style="stroke-width: 5px;" points="0 0 300 0 225 75 75 75" fill="white" />
        <polygon stroke="black" id="mesial" style="stroke-width: 5px;" points="300 0 300 300 225 225 225 75" fill="white" />
        <polygon stroke="black" id="palatal" style="stroke-width: 5px;" points="300 300 0 300 75 225 225 225" fill="white" />
        <polygon stroke="black" id="distal" style="stroke-width: 5px;" points="0 300 0 0 75 75 75 225" fill="white" />
        <polygon stroke="black" class="distal cross1" style="stroke-width: 5px;" fill="white" />
        <polygon stroke="black" class="distal cross2" style="stroke-width: 5px;" fill="white" />


    </g>

</svg>
<input type="radio" name="browser" value="Y" id="answer">

正如评论中提到的，您需要将输入元素放在 SVG 之外。如果您希望它位于中心，则必须进行一些绝对定位才能实现这一点。

此外，您可以使用 :checked 选择器在没有 JavaScript 的情况下执行此操作。但是，如果您这样做，则需要将 input 元素移动到 SVG 上方(除非您使用的是 scss，否则您可以更改选择器)。

示例:

input:checked + svg rect,
input:checked + svg polygon {
  fill: red;
}

<input type="radio" name="browser" value="Y" id="answer">

<svg class="teeth" id="svg" width="400px" height="300px" viewBox="0 0 400 300" preserveAspectRatio="xMidYMid meet">
    <!-- upper right 8 -->
    <g id="premolar-group">
        <rect x="75" y="75" stroke="black" id="occlusal" style="stroke-width: 5px;" width="150" height="150" fill="white"/>
        <polygon stroke="black" id="buccal" style="stroke-width: 5px;" points="0 0 300 0 225 75 75 75" fill="white" />
        <polygon stroke="black" id="mesial" style="stroke-width: 5px;" points="300 0 300 300 225 225 225 75" fill="white" />
        <polygon stroke="black" id="palatal" style="stroke-width: 5px;" points="300 300 0 300 75 225 225 225" fill="white" />
        <polygon stroke="black" id="distal" style="stroke-width: 5px;" points="0 300 0 0 75 75 75 225" fill="white" />
        <polygon stroke="black" class="distal cross1" style="stroke-width: 5px;" fill="white" />
        <polygon stroke="black" class="distal cross2" style="stroke-width: 5px;" fill="white" />


    </g>

</svg>