Сначала нужно получить элементы в SVG, которые вы хотите обновить. В вашем случае это похоже на ваши элементы polygon s и 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. Если вы хотите, чтобы это было в центре, вам нужно сделать какое-то абсолютное позиционирование, чтобы это произошло.
Кроме того, вы можете сделать это без JavaScript с помощью селектора :checked. Однако, если вы сделаете это, вам нужно будет переместить элемент input над SVG (если вы не используете s css, вы можете изменить селектор).
Пример:
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>