Flutter_svg: File manipulation (tinting one group in the SVG)

Created on 11 Nov 2018  路  5Comments  路  Source: dnfield/flutter_svg

The use case lists says: "Your vector drawing is meant to be static and non (or maybe minimally) interactive."

I have an svg with multiple groups (<g> elements) and want to be able to tint one of those at runtime either red or green.
Is this currently possible with this library? If it isn't is such functionality out of scope or might it be developed in the future (or eventually pull requests for it accepted)?

Most helpful comment

Yeah, that would be ideal. For elements with no id defined we could fall back on the default instance equality the Drawables currently use.

All 5 comments

This is not currently supported.

I'd be open to options around this, but wouldn't want to compromise performance or memory usage for it.

@ChristianKleineidam This is technically possible if you drop down a level and use a CustomPainter to draw the layers of the SVG individually. Check out Drawable.draw(Canvas, ColorFilter)

@dnfield that said, it would be really helpful to cache IDs provided for each Drawable in the drawable itself. The current system of only being able to look them up inside a DrawableRoot's definitions makes it hard to enumerate the IDs of layers present in an SVG.

Would you be open to a PR to expose IDs on Drawables?

Yes, that sounds entirely reasonable to me. Something like a final String id? And we could presumably implement hashCode and operator == via that?

Yeah, that would be ideal. For elements with no id defined we could fall back on the default instance equality the Drawables currently use.

I have the same need, the only option I found is with mergeStyle, but it does not work very well when you have several <g> in your svg. Are you planning to change the style by id?

Was this page helpful?
0 / 5 - 0 ratings

Related issues

bbedward picture bbedward  路  6Comments

lennartschoch picture lennartschoch  路  4Comments

boanergepro picture boanergepro  路  5Comments

alectogeek picture alectogeek  路  5Comments

kentcb picture kentcb  路  4Comments