[SOLVED] Help applying colortransform to SVG images

Can’t see where I’m going wrong here - is this implementation, or is it not possible to use colortransform in this way?

var image : SVG = new SVG(Assets.getText("img/test3.svg"));
var shape1 : Shape  = new Shape();
	image.render(shape1.graphics, 100, 100, 200, 200);	
	shape1.transform.colorTransform(image.render(shape1.graphics, 100, 100, 200, 200), new ColorTransform(1, 1, 1, 1, 198, 11, 11, 0));
addChild(shape1);

Output returns “openfl.geom.ColorTransform cannot be called”.

The API works like this:

shape1.transform.colorTransform = new ColorTransform (); // or some other color transform object

However, this is not fully implemented right now, we were stuck on some technical details on HTML5 targets, but now have a plan in place and just need to finish the work to get ColorTransform implemented. For the meantime, you can use bitmapData.colorTransform instead:

var bitmapData = new BitmapData (Math.ceil (shape1.width), Math.ceil (shape1.height), true, 0);
bitmapData.draw (shape1);
bitmapData.colorTransform (bitmapData.rect, new ColorTransform ()); // use the transform you want here
var bitmap = new Bitmap (bitmapData);
addChild (bitmap);

Thanks! However, that seems to only make the edges have the color transform applied to them. Is there a fill missing somewhere?

var image : SVG = new SVG(Assets.getText("img/test3.svg"));
var shape1 : Shape  = new Shape();
image.render(shape1.graphics, 10, 10, 200, 200);	

var bitmapData = new BitmapData (Math.ceil(shape1.width), Math.ceil(shape1.height), true, 0);
bitmapData.draw (shape1);
bitmapData.colorTransform(bitmapData.rect, new ColorTransform (1,1,1,1,198,11,11,0));
var bitmap = new Bitmap (bitmapData);
addChild (bitmap);

Transparent pixels don’t have ColorTransform applied to them. Can you check if flash target colours only edges as well?

Turns out this is a misunderstanding on my part as to how to color transform worked. I made a white square with a black background. ALL the white space on the image was considered as transparent. Simply had to make my square black and it worked as planned :slight_smile: