1

Cuando tengo, por ejemplo, un hexágono hecho en SVG, el cual tiene solo dibujado el borde... Y cuando haga un :hover ese hexágono se rellene del color del borde... ¿Cómo puedo utilizar el attributo (si se puede llamar así) " fill " ?

Imaginense un hexágono con el borde azul y el relleno transparente, pero cuando paso raton (:hover) quiero que se rellene del mismo color que el borde...

Actualmente manejo ese :hover empleando dos imágenes sobre el mismo hexágono, uno vacío y otro relleno. Sé que éste método no es eficiente, por ello me gustaría comprender cómo utilizar el " fill " para solucionarlo (si es posible)...

¡Saludos!

5

1 respuesta 1

1

Simplemente añádele el atributo fill="none" al HTML para no tener contenido dentro del elemento. El borde se lo podrás añadir con los atributos stroke-width para ponerle la anchura que quieres que tenga el borde y stroke para el color.

Por último, desde CSS le puedes modificar la propiedad fill.

svg:hover .circulo{
  fill: blue;
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="115" height="115">
  <circle class="circulo" stroke-width="3px" stroke="blue" cx="60" cy="60" r="50" fill="none"/>
</svg>

NOTA: En este caso he utilizado un círculo para simplificar el código pero el comportamiento sería exactamente el mismo con un hexágono.

1
  • Gracias ! Pronto lo pondré a prueba con muchas figuras para probar !
    – GD13
    Commented el 16 abr. 2018 a las 13:28

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.