I have an SVG asset of a map, in which I have to change the color of some cities depending on the results of a network call. On the web, one normally would add a class
to each path, give it some CSS, and toggle that class using JavaScript.
How can I achieve the same effect in flutter?
This can be done with the new version of jovial_svg
. It supports embedded stylesheets, so you can use CSS exactly as suggested. Of course, you'd need to re-parse the SVG whenever there's a change, but that's not a big deal here.
Alternately, if it's just one set of cities, you could use SVG's currentColor, and set that value in the appropriate ScalableImage
factory. But for your use case, CSS seems like the better way to go.
NOTE: At this exact moment, CSS support is in pre-release, but it should be formally released as 1.1.4 within a couple of days. In the meantime, see https://pub.dev/packages/jovial_svg/versions/1.1.4-rc.3