Changing svg opacity without .disableStyle()

felixwochnik

Hey guys!

I'm facing another problem, this time concerning a PShape that loads an svg. I want to display this svg "as is", but want to fade it in. I used disableStyle on simple svgs before, but now I'm importing some pretty complex svgs with multiple colors and I'd love to hear if any of you have a solution to keep the style enabled and only change the alpha/opacity/transparency.

The relevant parts of the code:

PShape[] svgs = new PShape[2];

...

svgs[i] = loadShape("test/svg" + (i + 1) + ".svg");

...

currentSvg = svgs[int(random(svgs.length))];

...

//I used the following line on the simple svg, because the lifespan variable increases and then decreases again, creating a nice fade.
//fill(0, lifespan*255);
shapeMode(CENTER);
shape(currentSvg, position.x, position.y, currentSvg.width/ratio, currentSvg.height/ratio);

I also tried using tint(255, lifespan*255); but this only seems to work on images?

Thanks for taking the time to read this, have an amazing day!

cameyo

You can try to draw the svg in a PGraphics and then apply tint() to fade in.

felixwochnik

@cameyo Thanks, man, I couldn't exactly get your answer to work, but you sparked the idea to simply use PNGs instead of SVGs because I don't need vectors anyways. It's working just as expected now, so thanks!