Estoy incluyendo una imagen SVG archivo en mi página dentro de un object etiqueta, como este:

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

La imagen en cuestión es un mapa del mundo, quiero transición de la fill de los bienes, cuando el ratón pasa por encima de un group, en este caso he agrupado mi SVG por continente, por lo que América del Sur se ve algo como esto:

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

Puedo conseguir el fill de la propiedad a cambio de activable mediante 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 obtener el fill color a la fatiga, con una transición de CSS, el color cambia al instante, ¿alguien puede arrojar luz sobre esto, por favor?

  • Esto podría tener que ver con que la configuración original de relleno a través del atributo de relleno en el HTML, y ajuste el pase de relleno a través de la CSS, pero voy a tener que hacer algunas pruebas para estar seguro. JSFiddle realmente podría ayudar.
  • Hmm interesante, yo no considerar que, voy a buscar un poco más, aquí un violín en el ínterin: jsfiddle.net/YLs6B
  • Aquí un violín donde #europe parece estar funcionando: JSFiddle. También, #south_america no existe en el violín que usted me dio.
  • tiene el número de identificación del sur-américa en el que el violín. Mismo para north_america. Si cambia el id a utilizar el «_» selecciona las américas

2 Comentarios

  1. 100

    En el fin de la transición/fade, CSS necesita un valor inicial y un valor final.

    Porque establecer el color de la ruta usando el SVG atributo fill="#FAFAFA", CSS no proceso y la transición no se desvanezca.

    Lugar si se utiliza CSS para definir el color, la transición se comportan como se espera

    Así que todo lo que tenía que hacer para hacer la transición del trabajo es dar a la #europe de partida de relleno para la transición de.

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

    Aquí un trabajo JSFiddle.


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

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

    Sólo con el fin de CSS para hacer su desvanecimiento, que necesita para manejar los valores de inicio y fin en CSS/estilo en línea (en lugar de usar el SVG fill= atributo).

    • Una advertencia (de clases) parece que currentColor mientras se ve como un relleno de valor no es tratada como tal. Relleno debe estar explícito el valor de color.
    • Parece que no funciona con IE11, a pesar de que podría ser un bug de IE sin una solución. [connect.microsoft.com/IE/feedbackdetail/view/920928/…. MS Borde funciona bien.
  2. 2

    Tenga en cuenta que el estilo de SVG a través de CSS desde dentro de un documento HTML, SVG tiene que ser embebido dentro del código HTML de la página, es decir, que no trabaja por la inclusión a través de <object> o <img> en HTML o a través de background-image etc. en CSS.

    Cuando está incrustado dentro de código HTML, puede, a continuación, el estilo de todos sus elementos como el estilo de los elementos HTML mediante un selector CSS para que coincida con el elemento(s) que usted desea que el estilo y la aplicación de los estilos apropiados para ello. Además de fill hay un montón de otras SVG atributos, que son también propiedades de CSS. Una lista de ellos se pueden encontrar en la Especificación SVG o en MDN.

    Para que una transición al trabajo, tanto en el inicio y el final de valor tiene que ser definido en el CSS. Así, en lugar de definir el color de relleno a través de la fill atributo (fill="#FAFAFA"), necesita ser definido, ya sea a través de la style atributo, que se parece a esto:

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

    o a través de una regla CSS embalado en una <style> elemento dentro de la SVG:

    <style type="text/css">
      #south-america > path {
        fill: #FAFAFA;
      }
    </style>

    En ambos casos usted puede, a continuación, la transición de los valores a través de la regla CSS que usted ha mencionado.

    Incrustar el SVG dentro de HTML, tiene la ventaja de que puede hacer que el estilo de dentro de la hoja de estilos que desee usar para el HTML, así se puede definir el estilo que se comparten entre el código HTML de la página y el incrustados SVG.

Dejar respuesta

Please enter your comment!
Please enter your name here