¿Cómo obtener un degradado lineal girado svg para usarlo como imagen de fondo?

He visto algunas preguntas bailando al respecto, así que espero que esto no sea demasiado redundante. Idealmente, me gustaría un image/svg+xml que se escale al 100% de su contenedor. Colorzilla me consigue un buen inicio con un data:image/svg+xml¿Cómo obtener un degradado lineal girado svg para usarlo como imagen de fondo?

<?xml version="1.0" ?> 
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none"> 
    <linearGradient id="grad-ucgg-generated" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="100%" y2="0%"> 
    <stop offset="0%" stop-color="#ffffff" stop-opacity="0"/> 
    <stop offset="100%" stop-color="#ff0000" stop-opacity="1"/> 
    </linearGradient> 
    <rect x="0" y="0" width="1" height="1" fill="url(#grad-ucgg-generated)" /> 
</svg>

Nota: el width="100%" height="100%" Me gustaría tomar este gradiente y girarlo por, digamos 65deg La API de canvas de HTML5 ofrece una gran manera para mí para construir este imagen y luego use .toDataURL() PNG para rellenar IE8 e IE7, pero me gustaría algo escalable para IE9.

Así que el objetivo es replicar esto:

background: linear-gradient(bottom, rgba(239, 239, 214,0) 0%, rgba(239, 239, 214,.8) 100%), 
linear-gradient(left, rgba(239, 239, 214,0) 60%,rgba(207, 223, 144,1) 100%), 
linear-gradient(right, rgba(239, 239, 214,0) 0%,rgba(239, 239, 214,1) 60%), 
linear-gradient(top, rgba(239, 239, 214,0) 60%,#cfdf90 100%); 
}

con un image/svg+xml que es ancho y la altura del 100%.

Probé http://svg-edit.googlecode.com pero la interfaz era menos que intuitiva para los tipos de edición que quería hacer. Gracias!

Fuente

2012-01-26 bodine

Para rotar el gradiente se puede por ejemplo utilizar el atributo 'gradientTransform', así:

<?xml version="1.0" ?> 
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" 
viewBox="0 0 1 1" preserveAspectRatio="none"> 
    <linearGradient id="grad-ucgg-generated" gradientUnits="userSpaceOnUse" 
    x1="0%" y1="0%" x2="100%" y2="0%" gradientTransform="rotate(65)"> 
    <stop offset="0%" stop-color="#ffffff" stop-opacity="0"/> 
    <stop offset="100%" stop-color="#ff0000" stop-opacity="1"/> 
    </linearGradient> 
    <rect x="0" y="0" width="1" height="1" fill="url(#grad-ucgg-generated)" /> 
</svg>

Fuente

2012-01-27 09:44:33

Tenga en cuenta que el atributo gradientTransform gira el gradiente de acuerdo con su punto de anclaje en 0,0. Para rotarlo desde el 'centro' necesita calcular los porcentajes adecuados para x1, y1, x2 y y2. Un ejemplo simple de PHP:

// Rotation can be 0 to 360 
$pi = $rotation * (pi()/180); 
$coords = array(
    'x1' => round(50 + sin($pi) * 50) . '%', 
    'y1' => round(50 + cos($pi) * 50) . '%', 
    'x2' => round(50 + sin($pi + pi()) * 50) . '%', 
    'y2' => round(50 + cos($pi + pi()) * 50) . '%', 
)

Fuente

2015-09-17 18:21:08

más fácil de configurar el origen de rotación en el gradientTransform cierto como que los dos argumentos adicionales a la rotación –

Podría usted proporciona un ejemplo sobre cómo establecer el origen de rotación? –

en gradientTransform = "rotar (90, 50, 30)" el origen de la rotación sería 50, 30 –

solución

Giel Berkers' en Javascript sería:

// angle can be 0 to 360 
var anglePI = (angle) * (Math.PI/180); 
var angleCoords = { 
    'x1': Math.round(50 + Math.sin(anglePI) * 50) + '%', 
    'y1': Math.round(50 + Math.cos(anglePI) * 50) + '%', 
    'x2': Math.round(50 + Math.sin(anglePI + Math.PI) * 50) + '%', 
    'y2': Math.round(50 + Math.cos(anglePI + Math.PI) * 50) + '%', 
}

Fuente

2016-10-19 14:53:34

<linearGradient gradientTransform="rotate(65)">

Fuente

2017-07-05 12:40:46

¿Cómo obtener un degradado lineal girado svg para usarlo como imagen de fondo?

Respuesta

Cuestiones relacionadas