Description
Imported from dnfield/flutter_svg#617
Original report by @FaFre on Nov 15, 2021
The recently added support for currentColor
in ThemeData
ignores the colors opacity.
For example this will render the icon with full opacity, despite it should be fully invisible:
final icon = svg.fromSvgBytes(iconData, iconKey, theme: SvgTheme(currentColor: Colors.blue.withOpacity(0)));
icon
..scaleCanvasToViewBox(canvas, iconSize)
..clipCanvasToViewBox(canvas)
..draw(canvas, Rect.zero);
Comment by @dnfield on Nov 15, 2021
This really depends on the source of the SVG you are trying to render. If currentColor
is not used anywhere in the svg source, setting the current color will have no effect.
I'll re-open this if there is a reproducible case you can share that shows this, including the SVG.
Comment by @FaFre on Nov 15, 2021
I threw together a working sample: https://github.com/FaFre/flutter_svg_color_opacity_bug
currentColor
is working for the SVG, it's just that opacity has no effect.
Comment by @dnfield on Nov 15, 2021
There's no currentColor
in that SVG, which is:
<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" id="aerialway" xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15">
<path d="M13,5H8V2.6c0.1854-0.1047,0.3325-0.2659,0.42-0.46L13.5,1.5C13.7761,1.5,14,1.2761,14,1s-0.2239-0.5-0.5-0.5L8.28,1.15
	C8.0954,0.9037,7.8077,0.7562,7.5,0.75C7.0963,0.752,6.7334,0.9966,6.58,1.37L1.5,2C1.2239,2,1,2.2239,1,2.5S1.2239,3,1.5,3
	l5.22-0.65C6.7967,2.4503,6.8917,2.5351,7,2.6V5H2C1.4477,5,1,5.4477,1,6v7c0,0.5523,0.4477,1,1,1h11c0.5523,0,1-0.4477,1-1V6
	C14,5.4477,13.5523,5,13,5z M7,11H3V7h4V11z M12,11H8V7h4V11z"/>
</svg>
Comment by @dnfield on Nov 15, 2021
Hmm! There seems to be a different bug here - we should not be using the currentColor
at all in this case.
Comment by @dnfield on Nov 15, 2021
/cc @bselwe
Comment by @dnfield on Nov 15, 2021
The other problem is that color
in the SVG spec doesn't include alpha, so it will just get ignored here. But Chrome and Firefox support it, so this library probably should too - I support rgba values elsewhere where the spec doesn't require it.
Comment by @bselwe on Nov 17, 2021
@dnfield The color
property is currently parsed on svg
, g
and symbol
elements using parseColor
method which seems to include alpha values. Is there something I'm missing here? 🤔
Comment by @dnfield on Nov 17, 2021
There's other logic that's kind of a mess that separately parses opacity.
I'd have to double check again, but I'm pretty sure there are paths that ignore alpha because it's not part of the spec.
Comment by @Chralu on Sep 13, 2023
Hello,
are there any updates on this issue ?
thanks :)