colorTransform equivalent color matrix

2k Views Asked by At

I'm trying to convert a simple FXG to SVG. The conversion is pretty much straightforward, but I'm encountering a color manipulation problem.

The FXG have a base shades of gray path, and I apply a different color transformation on subsequent use of this path for other shapes.
Here the FXG color transformation (equivalent to colorTransform) :

<ColorTransform redOffset="-255" blueOffset="25" greenOffset="56"/>

How can I convert this color transformation (even the negative offset) to something SVG understand ? I only need the color offset changes, no multiplier or alpha.
I think it could be achieved with <feColorMatrix> (look like this SVG filter work like the AS3 ColorMatrixFilter) but I can't find how.

So, the real general question is how I could convert those color offset changes to a color matrix filter ?

2

There are 2 best solutions below

1
On BEST ANSWER
var matrix : Array = new Array();
matrix = matrix.concat([1,0,0,0,-255]);// red
matrix = matrix.concat([0,1,0,0,  56]);// green
matrix = matrix.concat([0,0,1,0,  25]);// blue
matrix = matrix.concat([0,0,0,1,   0]);// alpha
var colorFilter : ColorMatrixFilter = new ColorMatrixFilter(matrix);

The last column is offset.

0
On

Actionscript ColorTransform also has redMultipler, greenMultiplier, blueMultiplier and alphaMultiplier properties apart from rOffset, gOffset, bOffset and aOffset.

SVG feColorMatrix becomes:

[
rMult/256, 0, 0, 0, rOffset/256,
0, gMult/256, 0, 0, gOffset/256,
0, 0, bMult/256, 0, bOffset/256,
0, 0, 0, aMult/256, aOffset/256
]