Come specificare il gradiente lineare svg in termini di un angolo

Vorrei specificare un gradiente lineare SVG in modo da duplicare esattamente il comportamento del gradiente lineare CSS. In una sfumatura CSS, ad esempio, puoi specificare che un gradiente inizia e termina rispettivamente in alto a sinistra e in basso a destra di una casella. Quando una casella viene ridimensionata, la sfumatura dello sfondo si adatta automaticamente alla nuova dimensione.Come specificare il gradiente lineare svg in termini di un angolo

Nel mio primo tentativo, ho duplicato un gradiente lineare CSS con SVG, specificando un angolo e calcolando le coordinate x1, y1, x2, y2 dalla dimensione del riquadro. Ma se la casella viene ridimensionata, l'angolo del gradiente non cambia e non è più corretto. (Dovrei ricalcolare tutte le coordinate).

Il mio prossimo tentativo è stato quello di utilizzare una trasformazione per ruotare il gradiente. Ecco po 'di codice:

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"> 
    <linearGradient id="g1" gradientUnits="userSpaceOnUse" 
     gradientTransform="rotate(-45 150 50)"> 
    <stop stop-color="#FF0000" offset="0"/> 
    <stop stop-color="#00FF00" offset="0.5"/> 
    <stop stop-color="#0000FF" offset="1"/> 
    </linearGradient> 
    <rect x="0" y="0" width="100%" height="100%" fill="url(#g1)" /> 
</svg>

Ora, questo funziona per una scatola di dimensioni (300.100), ma vedrete che sto avendo per specificare i valori assoluti per la centro di rotazione (150,50).

Posso specificare il centro in termini di percentuale? Alla fine voglio che l'angolo del gradiente si adatti alle dimensioni della scatola.

fonte

2012-02-24 Jules

È gradientUnits = "objectBoundingBox" gradientTransform = "ruota (-45 0,5 0,5)" cosa stai cercando? –

Penso di averlo provato perché ho iniziato a usare objectBoundingBox ma ci provo ancora ... – Jules

Ho appena provato di nuovo e non funziona. Quello che sembra fare è calcolare il gradiente ruotato su una casella quadrata, quindi per -45 passa da un angolo all'altro. Quindi sembra allungare la larghezza, lasciando il gradiente così com'è. Se la casella fosse 100x100, allora l'angolo sarebbe corretto, ma nel mio esempio, l'angolo finisce male. – Jules

SVG consente solo le origini della rotazione di trasformazione del gradiente allo specified in terms of absolute coordinates. Dovrai impostare l'origine della rotazione dinamicamente con JavaScript per fare ciò che penso tu stia cercando di fare: ruotare il gradiente, ma anche avere il colore che deve essere uniformemente distribuito all'interno della casella di contenimento.

fonte

2012-02-24 19:29:17

Grazie per la risposta. Quello che sto cercando di fare è imitare esattamente il gradiente lineare CSS. Tutti gli esempi sulla rete utilizzano una sfumatura specificata in termini di origine di un lato o di un angolo. Questo è facile da imitare in svg e l'effetto non cambierà se la casella viene ridimensionata. Una sfumatura CSS specificata in termini di un angolo può anche essere imitata calcolando le coordinate x1, y1, x2, y2 o ruotando attorno al centro. Il problema si verifica quando la casella viene ridimensionata. Per essere chiari, stai dicendo che quando la casella viene ridimensionata, le coordinate devono essere ricalcolate per mantenere la parità con un gradiente CSS? – Jules

Sì, è quello che sto dicendo. –

Come specificare il gradiente lineare svg in termini di un angolo

risposta

Problemi correlati