flutter_svg icon indicating copy to clipboard operation
flutter_svg copied to clipboard

Colored background in transparent SVG when using `SvgPicture` & `BoxDecoration` `backgroundBlendMode`

Open appcapsergen opened this issue 1 year ago • 2 comments

When wrapping a SvgPicture.asset(...) with a Container/DecoratedBox with foregroundDecoration containing a color and a backgroundBlendMode, the image will sometimes have the chosen color wherever the SVG file is transparent. Code example and images down below:

DecoratedBox(
  foregroundDecoration: const BoxDecoration(
    color: Colors.black,
    backgroundBlendMode: BlendMode.saturation,
  ),
  child: SvgPicture.asset('assets/images/certificate.svg'),
),

Expected result:

Actual result:

appcapsergen avatar Jun 02 '23 15:06 appcapsergen

@appcapsergen Does this only happen on Android or also on iOS?

kuemme01 avatar Jun 13 '23 06:06 kuemme01

@kuemme01 on both platforms, but on one it happens when you scroll and on the other it happens when you stop scrolling. Not sure which was which, but it's similar when scrolling if it makes sense.

appcapsergen avatar Jun 13 '23 13:06 appcapsergen