flutter
flutter

Reputation: 6786

SVG losing its curvature when in a Container

I have an svg as a child in a container. I'm using this package . The svg is curved at one side but it loses this curvature when rendered.

Padding(
              padding: const EdgeInsets.only(left: 30,right: 30,bottom: 10),
              child: ClipRRect(
                child: Container(
                  alignment: Alignment.centerRight,
                  child: SvgPicture.asset('assets/img/mask_purple_energizer.svg',height: 200,width: 1000,),
                    color: Theme.of(context).cardColor),
                borderRadius: BorderRadius.circular(15),
              ),
            ),

Here is the gist of the svg file:

https://gist.github.com/horgag1/66ef8ab683f26b9c19a318769a2cf3e9

enter image description here

Upvotes: 3

Views: 140

Answers (1)

rmtmckenzie
rmtmckenzie

Reputation: 40493

I don't think clip rects are supported by the SVG plugin you're using, or at least not how they are in your SVG. The right-side corners aren't being cropped properly either, but you can't tell that because the ClipRRect takes care of it.

If the SVG editor you're using supports it, you may be able to apply the clip to each shape instead of having it separate. Otherwise, your options are to either raise a bug or add clipping to the plugin, or to use a ClipPath widget and manually define the clipping path (or copy it out of the svg).

Upvotes: 1

Related Questions