如何通过checkbox勾选状态切换SVG内circle元素的填充颜色

问题根源 #

你使用的兄弟选择器~仅能匹配同一父元素下、位于选中元素之后的同级元素。你的#toggled-element（circle标签）是嵌套在<svg>内部的子元素，并不是<input>的直接同级，<input>的同级是外层<svg>，因此原有选择器无法匹配到circle，切换样式不生效。

修正方案 #

仅需要修改最后一条CSS选择器的匹配逻辑，先选中input的同级svg，再匹配内部的circle即可，修改后的完整可运行代码如下：

HTML代码

<label for="element-toggle">click me to toggle color</label>
<input id="element-toggle" type="checkbox" />

<svg viewBox="0 0 40 30">
  <circle id="toggled-element" cx="20" cy="15" r="10" />
</svg>

注：顺带调整了circle的坐标和半径，避免图形太小在视口内看不到

CSS代码

label[for=element-toggle] {
  cursor: pointer;
  color: blue;
}

#toggled-element {
  fill: green;
}

#element-toggle:checked ~ svg #toggled-element {
  fill: red;
}

内容的提问来源于stack exchange，提问作者Galgenstrick