Reputation: 6786
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
Upvotes: 3
Views: 140
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