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.

El relleno de CSS no está haciendo una transición para SVG envuelto en una etiqueta.

01 Aug, 2023 Programación

Estoy experimentando un comportamiento muy extraño cuando envuelvo un SVG en línea dentro de una etiqueta a y luego intento hacer transición de la propiedad fill del SVG al pasar el cursor sobre él.

Cuando el href de la etiqueta a está vinculado a un sitio web, la transición no funciona. Sin embargo, cuando está vinculado a mailto:<>, la transición funciona correctamente. Consulta el siguiente ejemplo.

¿Por qué la transición no funciona para la primera etiqueta a?

Vi otra pregunta donde esto se resolvió usando algunas trampas de JavaScript. No quiero usar JavaScript para este sitio simple que estoy construyendo. Además, la pregunta es de 2014, si realmente es un error en WebKit, no puede ser cierto que no lo hayan solucionado, ¿verdad?

NOTA: Estoy utilizando Safari 15.2 en macOS.

<div>
    <a href="https://stackoverflow.com">
        <svg class="hover-div">
            <use xlink:href="#rect"></use>
        </svg>
    </a>
    <a href="mailto:contact@stackoverflow.com">
        <svg class="hover-div">
            <use xlink:href="#rect"></use>
        </svg>
    </a>
</div>

<svg style="visibility: hidden">
    <symbol width="100%" height="100%" viewbox="0 0 100 100" stroke="none" stroke-width="1" fill-rule="evenodd" id="rect">
        <circle id="Oval" cx="50" cy="50" r="50"></circle>
    </symbol>
</svg>
Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Solución

    Este problema es específico de Safari 15.2 y parece ser un error del navegador. La transición en el atributo fill del SVG no funciona cuando el atributo href de la etiqueta a está vinculado a un sitio web. Sin embargo, funciona correctamente cuando el enlace está dirigido a una dirección de correo electrónico.

    No es necesario utilizar JavaScript para solucionar este problema. En su lugar, puedes utilizar la propiedad cursor para obligar a Safari a reconocer el estado de hover de la etiqueta a, permitiendo así que la transición funcione.

    Agrega la siguiente regla CSS a la etiqueta a:

    a {
  cursor: pointer;
}

    Esto solucionará el problema y permitirá que la transición funcione como se espera.

    .hover-div {
  fill: black;
  transition: all;
  transition-duration: 500ms;
}

.hover-div:hover {
  fill: deeppink;
}

a {
  cursor: pointer;
}

    Ten en cuenta que esta solución es específica de Safari 15.2 y puede que no sea necesaria en otros navegadores.

Comments are closed.