这是我当前的 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>
任何人都可以帮助如何在单击单选按钮时用黑色填充该框吗?
最佳答案
您首先需要获取 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>
关于javascript - 单击单选按钮后如何自动添加颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60620842/