使用复选框切换 svg 圆圈颜色

Question

我想要一个可以改变 svg 颜色的切换按钮，在本例中是一个圆圈。我可以制作一个复选框，纯粹在 HTML 和 CSS 中更改文本的颜色，但它不适用于 svg。

这是适用于文本的代码。

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

<div id="toggled-element">My color will be toggled</div>

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

#toggled-element {
  color: green;
}

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

这是我尝试使用相同的逻辑来更改 svg 圆圈而不是文本的颜色（这不起作用）

<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="1" cy="1.2" r="1" />
</svg>

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

#toggled-element {
  fill: green;
}

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

Answer 1

定位了错误的元素...

为了演示，我将 id="toggled-element" 切换为 svg 而不是 circle。

这个#element-toggle:checked~#toggled-element实际上是通过general sibling combinator选择了svg。

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

#toggled-element {
  fill: green;
}

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

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

<svg viewBox="0 0 40 30" id="toggled-element">
  <circle cx="1" cy="1.2" r="1" />
</svg>

Answer 2

1) 可以直接select svg 填充green 颜色为:

svg {
  fill: green;
}

2) 你必须使用fill来填充svg中的颜色为：

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

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

svg {
  fill: green;
}

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

<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="1" cy="1.2" r="1" />
  </svg>

使用复选框切换 svg 圆圈颜色

toggle svg circle color with checkbox

html

css

checkbox

svg

toggle