SVG El degradado lineal no funciona en Safari

Tengo un objeto SVG que contiene un degradado lineal incrustado directamente en un documento. Funciona bien en Chrome y Firefox, pero en Safari no se procesa nada. Si creo el SVG como un archivo y lo incrusto usando la etiqueta Object, funciona bien en Safari. Otras formas y rellenos funcionan, es solo un degradado lineal que no funciona. Creo que podría usar el objeto, pero preferiría incrustar el SVG directamente.SVG El degradado lineal no funciona en Safari

he crear una demostración aquí (funciona en Chrome, Safari no): http://jsfiddle.net/sjKbN/

me encontré con this answer que sugiere establecer el tipo de contenido a application/xhtml+xml, pero esto en sí mismo parece causar otros problemas.

Solo me preguntaba si alguien había encontrado alguna otra solución o idea para que esto funcione.

Fuente

2012-07-03 Christian Varga

El gradiente funciona en la versión nightly build WebKit de Safari (disponible para su descarga http://nightly.webkit.org/) por lo que hay una buena probabilidad de que va a trabajar en un futuro liberado la versión de Safari. –

Ahh es increíble, me alegra ver que lo arreglaron. ¡Saludos por la propina! –

Su gradiente trabajará en Safari si envuelves una etiqueta defs alrededor de él:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve"> 
<defs> 
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="5.6665" y1="149.5" x2="293.333" y2="149.5"> 
    <stop offset="0" style="stop-color:#FFF33B"/> 
    <stop offset="0.0595" style="stop-color:#FFE029"/> 
    <stop offset="0.1303" style="stop-color:#FFD218"/> 
    <stop offset="0.2032" style="stop-color:#FEC90F"/> 
    <stop offset="0.2809" style="stop-color:#FDC70C"/> 
    <stop offset="0.6685" style="stop-color:#F3903F"/> 
    <stop offset="0.8876" style="stop-color:#ED683C"/> 
    <stop offset="1" style="stop-color:#E93E3A"/> 
</linearGradient> 
</defs> 
<rect x="5.667" y="5.333" fill="url(#SVGID_1_)" width="287.667" height="288.333"/> 
</svg>

Parece que embalar sus referencias en defs se anima pero no obligatorio according to spec. Entonces este es un error en Safari.

Fuente

2012-07-03 12:04:39 Duopixel

Ojalá pudiera dar más votos positivos por esta respuesta, esto es perfecto. ¡Gracias! –

¡Lo mínimo que podría hacer después de su ayuda! http://stackoverflow.com/a/10808645/524555 – Duopixel

Acerca de Alpha: Parece que Safari (7 en este momento) no cubre el canal alfa de color SVG, use el atributo de detener la opacidad. ¡funciona bien!

<stop stop-color="rgba(x,y,z,0.5)"> //safari does not work 
<stop stop-color="rgb(x,y,z)" stop-opacity="0.5"> //ok

Fuente

2014-10-06 16:43:56 Sebastien

El código en la pregunta no usa colores rgba, por lo que no es una respuesta a esta pregunta en particular. –

¡Mal, señor Longson! Primero busqué el defecto en gradiente lineal que no funcionaba igual en safari que otro navegador, y vi esta publicación primero. En segundo lugar, el tema está relacionado con el comportamiento diferente del safari de gradiente lineal. El canal alfa forma parte de este tema global: "El gradiente lineal SVG no funciona en Safari" – Sebastien

@Sebastien, gran respuesta. ¡Definitivamente es relevante tenerlo aquí! Gracias – user2070775

SVG El degradado lineal no funciona en Safari

Respuesta

Cuestiones relacionadas