用复选框切换 svg 圆圈颜色

Posted 2023-02-18

【中文标题】用复选框切换 svg 圆圈颜色

【英文标题】：toggle svg circle color with checkbox

【发布时间】：2021-12-30 15:30:05

【问题描述】：

我想要一个切换按钮来改变 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;

【参考方案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>

【参考方案2】：

1) 可以直接选择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>