2012-12-26 7 views
5

La funzione lineare SVG feComponentTransfer non funziona come mi aspetto. Una pendenza di -1 e l'intercetta di 1 applicata a un'immagine in scala di grigi dovrebbe invertire l'immagine: nero -> bianco, bianco-> nero, 25% grigio -> 75% grigio, 50% grigio invariato e così via.svg feComponentTransfer linear function

La mia aspettativa è basata su http://www.w3.org/TR/filter-effects/#feComponentTransferElement, che dice "C" = pendenza * C + intercetta "dove" C è il componente iniziale (es., FeFuncR '), C' è il componente rimappato, entrambi nell'intervallo chiuso [0,1]. ".

Il seguente filtro

<filter id="linear"> 
    <feComponentTransfer> 
    <feFuncR type="linear" slope="-1" intercept="1" /> 
    <feFuncG type="linear" slope="-1" intercept="1" /> 
    <feFuncB type="linear" slope="-1" intercept="1" /> 
    </feComponentTransfer> 
</filter> 

mappe bianco a nero e bianco al nero, ma intermedi valori sono spenti, ad esempio 50% di mappe grigie al 90% di grigio e al 75% di mappe di grigio al 98% di grigio. Vedi http://jsfiddle.net/Rpjs2/ per un semplice esempio. Ottengo gli stessi risultati in Firefox e Safari.

Questo è il mio primo tentativo di filtri SVG, quindi ho il sospetto che io stia fraintendendo le specifiche. Qualcuno può correggermi?

+0

Controllare [questo esempio] (http://src.chromium.org/chrome/branches/WebKit/195/LayoutTests/svg/custom/feComponentTransfer-Linear.svg) dal codice sorgente WebKit. L'uso di un filtro simile fa "invertire" il gradiente (guarda le definizioni del filtro, poiché il testo che le descrive non è corretto) ma non perfettamente. Sembra essere spostato a sinistra un po '. – seliopou

+0

È spostato molto a sinistra in realtà, da nessuna parte vicino a quello che si otterrebbe applicando -1 * c + 1. Il mio primo pensiero è che questo è un bug, in quanto non corrisponde alle specifiche w3, ma è strano che Safari e Firefox lo abbiano implementato nello stesso modo (apparentemente sbagliato). Ho archiviato segnalazioni di bug su Mozilla e WebKit e riferirò se lo considerano un bug. – BobW

+0

Mi hai ispirato a doc feComponentTransfer nei documenti webform. Fatemi sapere cosa ne pensate: http://docs.webplatform.org/wiki/svg/elements/feComponentTransfer –

risposta

5

I filtri funzionano generalmente nello spazio colore linearRGB. Questo caso di utilizzo vuole sRGB in modo basta impostare color-interpolation-filters = "sRGB" sul filtro

+0

Grazie, l'ho appena provato. Funziona in Firefox e Chrome, ma Safari ignora l'impostazione. (Fastidioso che il build di rilascio di Safari utilizzi versioni precedenti di WebKit rispetto a Chrome. Ci sono molti bug SVG in Safari che sono stati risolti mesi fa in WebKit e non appaiono in Chrome.) – BobW

0

Puoi principalmente corretto per questo utilizzando un altro trasferimento componente dopo l'originale.

<feComponentTransfer> 
    <feFuncR type="gamma" offset="0" amplitude="1" exponent="4.84"/> 
    <feFuncG type="gamma" offset="0" amplitude="1" exponent="4.84"/> 
    <feFuncB type="gamma" offset="0" amplitude="1" exponent="4.84"/> 
    </feComponentTransfer> 

Ciò diffondere la gamma di colori più appropriato usando una correzione "doppio" gamma di 2,2^2 = 4,84.

Problemi correlati