Skip to content

[flutter_svg] currentColor opacity ignored #158680

Open
@stuartmorgan-g

Description

@stuartmorgan-g

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&#xA;&#x9;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&#xA;&#x9;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&#xA;&#x9;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 :)

Metadata

Metadata

Assignees

No one assigned

    Labels

    p: flutter_svgThe Flutter SVG drawing packagespackageflutter/packages repository. See also p: labels.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions