Come ottenere un gradiente lineare ruotato svg da utilizzare come immagine di sfondo?

Ho visto alcune domande ballare intorno a questo, quindi spero che questo non sia troppo ridondante. Idealmente, mi piacerebbe un image/svg+xml che scala al 100% del suo contenitore. Colorzilla mi fa un grande inizio con un data:image/svg+xmlCome ottenere un gradiente lineare ruotato svg da utilizzare come immagine di sfondo?

<?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: il width="100%" height="100%" mi piacerebbe prendere questo gradiente e ruotarlo di, diciamo 65deg La tela API HTML5 fornisce un ottimo modo per me per costruire questo immagine e quindi utilizzare .toDataURL() PNG per polyfill IE8 e IE7, ma mi piacerebbe qualcosa di scalabile per IE9.

Quindi l'obiettivo è di replicare questo:

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 una image/svg+xml che è larghezza e l'altezza al 100%.

Ho provato lo http://svg-edit.googlecode.com ma l'interfaccia era meno intuitiva per i tipi di editing che volevo fare. Grazie!

fonte

2012-01-26 bodine

Per ruotare il gradiente è possibile per esempio utilizzare l'attributo 'gradientTransform', in questo modo:

<?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>

fonte

2012-01-27 09:44:33

Si prega di notare che l'attributo gradientTransform ruota il gradiente in base al suo punto di ancoraggio a 0,0. Per ruotarlo dal "centro" è necessario calcolare le percentuali appropriate per x1, y1, x2 e y2. Un semplice esempio 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) . '%', 
)

fonte

2015-09-17 18:21:08

Più facile da impostare l'origine di rotazione nella gradientTransform vero che i due argomenti aggiuntivi per la rotazione –

Could fornisci un esempio su come impostare l'origine di rotazione? –

in gradientTransform = "ruota (90, 50, 30)" l'origine della rotazione sarebbe 50, 30 –

soluzione

Giel Berkers' in Javascript sarebbe:

// 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) + '%', 
}

fonte

2016-10-19 14:53:34

<linearGradient gradientTransform="rotate(65)">

fonte

2017-07-05 12:40:46

Come ottenere un gradiente lineare ruotato svg da utilizzare come immagine di sfondo?

risposta

Problemi correlati