Estoy cargando diferentes SVG dinámicamente dentro de una aplicación web creada en AngularJS, también estoy alterando la opacidad de las capas dentro de los SVG. Estos SVG tienen algunas rutas con la propiedad de patrón de relleno como tal
<defs> <pattern id="glass-floral" patternUnits="userSpaceOnUse" width="184" height="272"> <image xlink:href="../img/glass-floral.png" x="0" y="0" width="184" height="272"/> </pattern> </defs> <rect x="98.3" y="85.5" fill="url(#glass-floral)" width="365" height="318.8"/>Todo esto funciona muy bien al principio; sin embargo, bajo algunas condiciones, estos # rellenos simplemente desaparecen:
-
Condición 1 : si tuviera que cambiar a otro SVG y viceversa.
Resultado: : El relleno # aún es visible.
-
Condición 2 : si tuviera que alterar la opacidad del elemento con el relleno #.
Resultado: : El relleno # aún es visible.
-
Condición 3 : si tuviera que cambiar a otro SVG y alterar la opacidad del elemento con el relleno #.
Resultado: : El relleno # se vuelve invisible.
-
Esto significa que todos los estilos parecen aplicarse normalmente en el código, pero no se ve ningún relleno visible real. Este comportamiento existe por lo que puedo ver en Chrome y ligeramente diferente en Safari. Firefox parece ser inmune.
Intenté pasar manualmente el elemento a otro relleno y volver al navegador para ver si tal vez algo se había almacenado en caché, sin suerte. Todavía creo que este puede ser el caso de alguna manera, con la forma en que # se refiere a un patrón en línea definido en <defs> que puede que AJAX aún no haya cargado, pero la regla CSS almacenada en caché sigue flotando.
Si ayuda, los dos SVG entre los que estoy cambiando tienen el mismo <defs> y CSS aplicado. ¿Quizás el caso doble del patrón definido está causando un problema?
Después de algunas investigaciones, esto parece ser un problema con los navegadores (Chrome/Safari posiblemente otros) que no pueden mantenerse al día con el relleno de representación: url (#) y la opacidad para el mismo elemento al mismo tiempo, al menos en casos de múltiples /SVG cargados dinámicamente.
Para resolver esto, aplique su css de opacidad a un elemento contenedor alrededor del elemento que tiene el relleno: url (#), ejemplo a continuación:
<defs> <pattern id="glass-floral" patternUnits="userSpaceOnUse" width="184" height="272"> <image xlink:href="../img/glass-floral.png" x="0" y="0" width="184" height="272"/> </pattern> </defs> <style>.opacity-class { opacity: 0.33; }</style> <g class="opacity-class"> <rect x="98.3" y="85.5" fill="url(#glass-floral)" width="365" height="318.8"/> </g>Esto permite que el navegador haga ambas cosas de forma independiente y no arruine tus bonitas imágenes.
Tenía varios elementos svg y el problema era el mismo ID de todas las etiquetas de pattern . Entonces, usar diferentes id="" para la etiqueta de pattern de cada elemento svg resolvió mi problema con la desaparición de fill="url()" en la recarga dinámica...