I would like a toggle button that changes the color of a svg, a circle in this case. I am able make a checkbox that changes the color of text purely in HTML and CSS, but it is not working with an svg.

Here is the code that works for text.

<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;
}

Here is my attempt to use the same logic to change the color of an svg circle instead of text (this doesn't work)

<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;
}

CodePudding user response：

The wrong element was being targeted...

I switched the id="toggled-element" to the svg as opposed to the circle to demonstrate.

This #element-toggle:checked~#toggled-element actually selects the svg by way of the general sibling combinator.

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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

1) You can directly select the svg and fill it with green color as:

svg {
  fill: green;
}

2) You have to use fill to fill the color in svg as:

#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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>