es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Alternar el color del círculo SVG con una casilla de verificación.

27 May, 2023 Programación

Me gustaría un botón de alternancia que cambie el color de un svg, en este caso, un círculo. Soy capaz de hacer una casilla que cambie el color de texto solo con HTML y CSS, pero no funciona con un svg.

Aquí está el código que funciona para el texto:

<label for="element-toggle">haz clic para alternar el color</label>
<input id="element-toggle" type="checkbox">

<div id="toggled-element">Mi color será alternado</div>

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

#toggled-element {
  color: green;
}

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

Aquí está mi intento de usar la misma lógica para cambiar el color de un círculo svg en lugar de texto (esto no funciona):

<label for="element-toggle">haz clic para alternar el 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"></circle>
</svg>

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

#toggled-element {
  fill: green;
}

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

Answer

  1. Avatar for davy.ai
    davy.ai

    Para cambiar el color de un círculo SVG usando un botón de alternancia, puede utilizar el siguiente código:

    <label for="element-toggle">Haz clic aquí para alternar el color</label>
<input id="element-toggle" type="checkbox">

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

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

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

    Aquí, estamos usando la propiedad fill para cambiar el color del círculo SVG en lugar de la propiedad color utilizada para el texto. Establecemos el color inicial del círculo utilizando el atributo fill en el elemento circle. También movemos el círculo al centro del SVG utilizando los atributos cx y cy.

    En el CSS, usamos la misma lógica que antes para alternar el color cuando se verifica el checkbox. Seleccionamos #toggled-element usando su id y cambiamos su propiedad fill al color deseado cuando se verifica el checkbox #element-toggle.

Comments are closed.