Gradientes CSS3 como SVG

En mi página estoy usando muchos degradados CSS3. Me gustaría proporcionar algún respaldo de SVG para IE y Opera.Gradientes CSS3 como SVG

Crear contraseñas SVG para degradado lineal CSS3 es bastante fácil. Yo uso el siguiente código:

<svg xmlns="http://www.w3.org/2000/svg"> 
    <linearGradient id="g" gradientTransform="rotate(90,.5,.5)"> 
     <stop stop-color="black" offset="0"/> 
     <stop stop-color="white" offset="1"/> 
    </linearGradient> 
    <rect x="0" y="0" width="100%" height="100%" fill="url(#g)"/> 
    </svg>

lo que equivale a esto css:

background:-webkit-linear-gradient(black,white); 
    background: -moz-linear-gradient(black,white); 
    background:  -o-linear-gradient(black,white); 
    background:  linear-gradient(black,white);

Ahora, cuando se trata de CSS3 radiales gradientes, las cosas están poco más complicado. estoy teniendo suerte creando el equivalente SVG para un CSS3 gradiente radial como la siguiente:

background:-webkit-radial-gradient(50% 10%,circle,rgba(255,255,255,.3) 10%,rgba(255,255,255,0) 90%); 
    background: -moz-radial-gradient(50% 10%,circle,rgba(255,255,255,.3) 10%,rgba(255,255,255,0) 90%); 
    background:  -o-radial-gradient(50% 10%,circle,rgba(255,255,255,.3) 10%,rgba(255,255,255,0) 90%); 
    background:  radial-gradient(circle at 50% 10%,rgba(255,255,255,.3) 10%,rgba(255,255,255,0) 90%);

Hasta ahora me las he arreglado para llegar a esto:

<svg xmlns="http://www.w3.org/2000/svg"> 
    <radialGradient id="g"> 
    <stop stop-opacity=".3" stop-color="white" offset=".1"/> 
    <stop stop-opacity="0" stop-color="white" offset=".9"/> 
    </radialGradient> 
    <rect x="0" y="0" width="100%" height="100%" fill="url(#g)"/> 
</svg>

pero da me diferentes resultados.

¿Cómo podría producir el mismo degradado que el original en CSS3?

He aquí una demostración de dos gradientes: http://jsfiddle.net/QuMnA/

Fuente

2012-09-06 Kuwiuwuw Kurwiow

Es necesario especificar los cxcy y atributos de degradado radial que ...

<svg xmlns="http://www.w3.org/2000/svg"> 
    <radialGradient id="g" r="1" cx="50%" cy="10%"> 
    <stop stop-opacity=".3" stop-color="white" offset=".1"/> 
    <stop stop-opacity="0" stop-color="white" offset=".9"/> 
    </radialGradient> 
    <rect x="0" y="0" width="100%" height="100%" fill="url(#g)"/> 
</svg>

Fuente

2012-09-06 18:02:08 Duopixel

Bueno, lo he intentado. Mira el resultado: http://jsfiddle.net/vvXgb/. Está más cerca del original, pero todavía no del todo como debería ser. –

juega con el atributo 'r' en su etiqueta radialGradient hasta que obtenga un resultado satisfactorio, revise el código actualizado. – Duopixel

Los navegadores modernos admiten el fondo SVG por cierto, por lo que no hay necesidad de recurrir a CSS3 si codifica con base64. – Duopixel

Gradientes CSS3 como SVG

Respuesta

Cuestiones relacionadas