C'è un modo per eseguire un 'gradiente angolare' in SVG?Gradiente angolare SVG
(non so il termine ufficiale - è il tipo di sfumatura che si vede in colore-raccoglitori, dove si varia a seconda del punto di vista.)
SVG sembra supportare solo gradienti lineari e radiali, ma io Sto pensando che potrebbe esserci un modo per usare una trasformazione per simulare quello che voglio.
grazie!
Non esiste un supporto standard per eseguire gradienti angolari (conici).
Ma vedere http://wiki.inkscape.org/wiki/index.php/Advanced_Gradients#Conical_gradient per alcuni metodi di approssimazione (codice sorgente non incluso, però). Gli esempi su quel collegamento non funzionano.
Buona scoperta. E una cosa bella di SVG è che * è * il codice sorgente. Come l'HTML, se puoi vederlo, non c'è modo che il codice sorgente di * non * sia incluso. :-) – Ken
Ciao Ken, non so come potrebbe aiutare se non ho la fonte. Non potevo semplicemente hardcode il percorso svg nella mia pagina per generare gradiente. per esempio. Sto cercando un gradiente angolare attraverso un arco cerchiato di riempimento. – Tintin
@ken non sempre è vero ... mi sembrano alcuni programmi che disegnano giganteschi tamponi tutti in singoli percorsi 10kb + usando l'attributo d ... Non è così facile da leggere che potrei aggiungere. –
http://en.wikipedia.org/wiki/File:Blended_colour_wheel.svg utilizza una tecnica innovativa per approssimarla.
incorpora un'immagine png per mostrare il cerchio del gradiente .. non è una vera grafica vettoriale. solo i tratti sono fatti con il percorso. –
Ecco un possibile gradiente vettore conica, ma solo VML (+ IE) può farlo ...:
Nella mia risposta a questa domanda simile, ho usato sei gradienti lineari per approssimare un gradiente conico. Se hai solo bisogno del gradiente per il tratto/perimetro di un cerchio, piuttosto che per il riempimento, allora dovrebbe essere un'approssimazione abbastanza buona.
Questo sembra e fantastico! Ma qualche suggerimento come faccio a generalizzarlo per un arco con un raggio esterno e un raggio interno? Molte grazie! – Tintin
È possibile ottenere discontinuità di colore dove si incontrano due gradienti lineari. Probabilmente il posto più sicuro per allineare i Linearradients con sarebbe l'angolo dei raggi interni. Perché allora quell'area triangolare tra dove terminano i due gradienti sarebbe dello stesso colore. Questo risponde alla tua domanda? –
Ciao, avevo bisogno di un gradiente lungo un arco completo proprio come te, ma avevo bisogno di variare tra 2 colori solo - da blu a violetto ... ma non importa quali combinazioni di colori provo o quanti segmenti divido il mio arco in - Non riesco a ottenere il gradiente corretto. Potresti pubblicare/aggiornare la tua risposta con un gradiente che varia tra solo 2 colori, ad es. blu a voilet! Grazie – Tintin
Ecco come farlo usando i modelli: https://jsfiddle.net/prozoroff/8eodzrke/
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="800" width="800">
<defs>
<linearGradient id="Gradient1" gradientTransform="rotate(90)">
<stop offset="0%" stop-color="#ff0000"/>
<stop offset="100%" stop-color="#00ff00"/>
</linearGradient>
<linearGradient id="Gradient2" gradientTransform="rotate(90)">
<stop offset="0%" stop-color="#0000ff"/>
<stop offset="100%" stop-color="#00ff00"/>
</linearGradient>
<pattern id="Pattern" x="0" y="0" width="600" height="600" patternUnits="userSpaceOnUse">
<g transform="rotate(0, 300, 300)">
<rect shape-rendering="crispEdges" x="0" y="0" width="300" height="600" fill="url(#Gradient1)"/>
<rect shape-rendering="crispEdges" x="300" y="0" width="300" height="600" fill="url(#Gradient2)"/>
</g>
</pattern>
</defs>
<path id='arc5' style="stroke: url(#Pattern);" fill='transparent' stroke-width='60' d='M 364 58 A 250 250 0 1 1 235 58'/>
</svg>
Si prega di aggiungere qualche documentazione/spiegazione. –
penso che stai descrivendo un gradiente radiale con molti colori. Puoi mostrare un'immagine di ciò che stai cercando di creare? – SLaks