transicion - transition css hover

Usar CSS para hacer la transición de la propiedad de relleno de una ruta de SVG en vuelo estacionario

Question

Incluyo un archivo de imagen SVG en mi página dentro de una etiqueta de object , como esta:

<object type="image/svg+xml" data="linkto/image.svg">
   <!-- fallback image in CSS -->
</object>

La imagen en cuestión es un mapa mundial, quiero hacer la transición de la propiedad de fill cuando el mouse se desplaza sobre un group , en este caso he agrupado mi SVG por continente, por lo que Sudamérica se ve más o menos así:

<g id="south_america">
    <path fill="#FAFAFA" d="(edited for brevity)"/>
</g>

Puedo cambiar la propiedad de fill al pasar el mouse usando el siguiente CSS en la parte superior de mi documento SVG:

<style>
#south_america path {
    transition: fill .4s ease;
}
#south_america:hover path {
    fill:white;
}
</style>

Pero no puedo hacer que el color de fill desvanezca con una transición de CSS, el color simplemente cambia instantáneamente, ¿alguien puede arrojar luz sobre esto, por favor?

Answer 1

Para hacer transición / fundido, CSS necesita un valor inicial y un valor final.
Como configura el color de la ruta utilizando el atributo SVG fill="#FAFAFA" , CSS no lo procesa y la transición no se desvanece.

En cambio, si usa CSS para establecer el color, la transición se comportará como se esperaba

Así que todo lo que tuve que hacer para que la transición funcionara es darle a la #europe un relleno inicial para la transición.

 path { transition: fill .4s ease; }
 /* set fill for before and for during hover */
 #europe       path { fill: red; }
 #europe:hover path { fill: white; }

Aquí hay un JSFiddle funcionamiento.

O hacerlo en línea puede ser más conveniente ( style="" ):

<path style="fill: #FAFAFA;" d="..."/>

Para que CSS se desvanezca, necesita manejar los valores de inicio y final en CSS / estilo en línea (en lugar de usar el atributo SVG fill= ).