Repository: flutter
Issue: [flutter_svg] fill-opacity in groups not rendering
Labels: package,p: flutter_svg

_Imported from https://github.com/dnfield/flutter_svg/issues/184_

Original report by @gmaggio on Jun 24, 2019

**Fill-opacity** does not render when in **groups**.

- Flutter SVG **0.12.4+2**
- Dart SDK 2.3.0-dev.0.5.flutter-a1668566e5
- Flutter SDK 1.5.4-hotfix.2 (Stable)

## Code with bug:

> Note: `fill-opacity` in `g` tag

```svg
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20">
    <g fill="none" fill-rule="evenodd">
        <g fill="#000">
            <path id="a" d="M12.805 12.069c0 .569-.457 1.03-1.02 1.03s-1.02-.461-1.02-1.03c0-.57.457-1.031 1.02-1.031s1.02.46 1.02 1.03"/>
        </g>
        <g fill="#000">
            <path id="c" d="M16.89 17.623H3.14a.778.778 0 0 1-.764-.772V7.59c0-.419.35-.773.764-.773h13.75c.415 0 .765.354.765.773v2h-6.361c-1.353 0-2.453 1.112-2.453 2.479 0 1.366 1.1 2.477 2.453 2.477h6.36v2.305c0 .419-.35.772-.764.772zM15.127 2.419a.776.776 0 0 1 .702.103.658.658 0 0 1 .284.544v2.209H6.926l8.2-2.856zm2.529 11.356h-6.361a1.7 1.7 0 0 1-1.69-1.706 1.7 1.7 0 0 1 1.69-1.707h6.36v3.413zm-.015-8.362V3.03a2.187 2.187 0 0 0-.932-1.77 2.289 2.289 0 0 0-2.078-.3h-.001L2.114 5.315a.768.768 0 0 0-.49.555 2.313 2.313 0 0 0-.775 1.72v9.261c0 1.274 1.032 2.316 2.292 2.316h13.75c1.26 0 2.291-1.042 2.291-2.316V7.59c0-1.008-.648-1.86-1.541-2.177z"/>
        </g>
        <g>
            <g fill="#000" fill-opacity=".2">
                <path id="e" d="M7.71 16.851c0 .772.764.772.65.772H4.126c-.408 0-.743 0-1.03-.01a.775.775 0 0 1-.719-.762V7.59c0-.404.326-.738.718-.763.288-.008.623-.01 1.031-.01h4.348c-.764 0-.764.773-.764.773v9.261zm3.055-11.577h-3.84l3.84-1.336v1.336z"/>
            </g>
        </g>
        <path d="M0 0h20v20H0z"/>
    </g>
</svg>
```

![svg_opacity_bug](https://user-images.githubusercontent.com/127763/60002171-5b242d80-9692-11e9-95d3-3e2f0d8514af.png)

## Fixed code:

> Note: `fill-opacity` in `path` tag

```svg
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20">
    <g fill="none" fill-rule="evenodd">
        <g fill="#000">
            <path id="a" d="M12.805 12.069c0 .569-.457 1.03-1.02 1.03s-1.02-.461-1.02-1.03c0-.57.457-1.031 1.02-1.031s1.02.46 1.02 1.03"/>
        </g>
        <g fill="#000">
            <path id="c" d="M16.89 17.623H3.14a.778.778 0 0 1-.764-.772V7.59c0-.419.35-.773.764-.773h13.75c.415 0 .765.354.765.773v2h-6.361c-1.353 0-2.453 1.112-2.453 2.479 0 1.366 1.1 2.477 2.453 2.477h6.36v2.305c0 .419-.35.772-.764.772zM15.127 2.419a.776.776 0 0 1 .702.103.658.658 0 0 1 .284.544v2.209H6.926l8.2-2.856zm2.529 11.356h-6.361a1.7 1.7 0 0 1-1.69-1.706 1.7 1.7 0 0 1 1.69-1.707h6.36v3.413zm-.015-8.362V3.03a2.187 2.187 0 0 0-.932-1.77 2.289 2.289 0 0 0-2.078-.3h-.001L2.114 5.315a.768.768 0 0 0-.49.555 2.313 2.313 0 0 0-.775 1.72v9.261c0 1.274 1.032 2.316 2.292 2.316h13.75c1.26 0 2.291-1.042 2.291-2.316V7.59c0-1.008-.648-1.86-1.541-2.177z"/>
        </g>
        <g>
            <g fill="#000">
                <path id="e" fill-opacity=".2" d="M7.71 16.851c0 .772.764.772.65.772H4.126c-.408 0-.743 0-1.03-.01a.775.775 0 0 1-.719-.762V7.59c0-.404.326-.738.718-.763.288-.008.623-.01 1.031-.01h4.348c-.764 0-.764.773-.764.773v9.261zm3.055-11.577h-3.84l3.84-1.336v1.336z"/>
            </g>
        </g>
        <path d="M0 0h20v20H0z"/>
    </g>
</svg>
```

![svg_opacity_fixed](https://user-images.githubusercontent.com/127763/60002334-a50d1380-9692-11e9-88df-ca9bf69b7d1b.png)

However, **Flutter SVG 0.10.0** doesn't seem to have this bug.


---
Comment by @dnfield on Jun 24, 2019
Thanks - I had to rework how opacity was handled for groups between these versions,a nd probably missed something here.  Will take a look.

---
Comment by @dnfield on Jun 25, 2019
The spec is a little ambiguous here.  `fill-opacity` and `stroke-opacity` are defined as applying to shape and textual elements, but `<g>` is documented as being able to have those as properties.  The properties themselves aren't documented as requiring the same compositing properties as `opacity` on a group.

That said, Chrome handles this the same way as if `opacity` had been applied to the `g`.

I'm a little worried about the expense of this, but it should be doable. That said, it's also a pretty big change- right now, groups just ask their shapes to draw paths and fills at the same time.  I think to achieve this they'll have to composite them separately.

---
Comment by @psyanite on Sep 6, 2019
Hi @dnfield, firstly I want to say how grateful and amazing this library this.
I just wanted to say I recently upgraded from v0.6.3 to v0.14.0.

I have a heart shape (path) that has a white stroke outline.
```
<svg xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 32 32" fill="#484848" fill-opacity="0.15" stroke="#ffffff" stroke-width="2.5" focusable="false"
     stroke-linecap="round" stroke-linejoin="round" style="height: 24px; width: 24px; display: block; overflow: visible;">
    <g>
        <path d="m23.99 2.75c-.3 0-.6.02-.9.05-1.14.13-2.29.51-3.41 1.14-1.23.68-2.41 1.62-3.69 2.94-1.28-1.32-2.46-2.25-3.69-2.94-1.12-.62-2.27-1-3.41-1.14a7.96 7.96 0 0 0 -.9-.05c-1.88 0-7.26 1.54-7.26 8.38 0 7.86 12.24 16.33 14.69 17.95a1 1 0 0 0 1.11 0c2.45-1.62 14.69-10.09 14.69-17.95 0-6.84-5.37-8.38-7.26-8.38" />
    </g>
</svg>
```
This is a minor issue but, previously `fill-opacity` would work but it is no longer working (it is rendered as 100% opacity in Flutter). In IntelliJ I can see it's clearly working in the SVG preview.

I've since moved `fill-opacity` as an attribute on <path> and it is now working expectedly.