Raphael.js percorso/linea con gradiente?

Question

è possibile tracciare un tracciato in raphael con un gradiente?

http://jsfiddle.net/L92Ch/ è un esempio.

Voglio che questa linea abbia un gradiente da un colore all'altro. Nella documentazione SVG e Raphael non trovo nulla a riguardo.

jsplumb.org/jquery/anchorDemo.html questo è un esempio di jsplumb. Le linee hanno un gradiente. jslumb usa il tag canvas. (scusa come nuovo utente sono autorizzato a pubblicare solo un link)

L'altra mia idea è di usare un retto con una piccola altezza per imitare la linea, ma ho anche linee di Bezier.

migliori saluti

Freakezoid

Answer 1

Fuori dalla scatola, Raffaello non può farlo, avresti bisogno di un plugin. Ecco il jsfiddle per il semplice che ho creato: http://jsfiddle.net/tcouc/qncEC/

La funzione defineLinearGradient aggiunge semplicemente i gradienti SVG lineari alla sezione defs, e la funzione strokeLinearGradient aggiunge l'attributo corsa per fare riferimento l'id del linearGradient che si crea.

Ho fatto in questo modo in modo da poter fare riferimento al gradiente in più di una forma.

Nota che non puoi semplicemente impostare il tratto usando la funzione attr dell'elemento raphael - non funzionerà - internamente la funzione attr tenta di convertire il valore impostato nell'argomento del tratto in un'espressione di valore rgb e fallisce, quindi il mio strokeLinearGradient funzione.

Speranza che aiuta

Answer 2

SVG supporta i gradienti.

Recentemente ho rilasciato la versione 1.3.1 di jsPlumb, in cui è supportato SVG. La demo hai citato ha gradienti SVG in esso:

http://jsplumb.org/jquery/anchorDemo.html#

(è necessario cliccare sul link 'SVG' a calci in SVG render mode)

La specifica SVG ha un po 'giusto dire sui gradienti:

http://www.w3.org/TR/SVG/pservers.html