Flutter中如何将SVG设置为圆角Card的背景？

问题根源 #

1. SVG尺寸与内容不匹配：你提供的SVG整体尺寸为204112，包含阴影滤镜的额外空间，而目标内容区域是18495，导致SVG边缘（含阴影）超出Card的圆角范围，裁剪失效。
2. 裁剪层级错误：第一种尝试中clipBehavior虽设置在Card上，但SizedBox包裹的SVG未被正确约束；第二种尝试省略了Card的clipBehavior，SVG内容自然溢出圆角。

解决方案 #

方案一：仅调整Flutter代码（无需修改SVG） #

确保Card开启裁剪，并约束SVG的显示范围，适配Card圆角：

Card(
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
  clipBehavior: Clip.antiAliasWithSaveLayer, // 核心：开启Card的圆角裁剪
  child: SizedBox(
    width: 184,
    height: 95,
    child: Stack(
      fit: StackFit.expand,
      children: [
        SvgPicture.asset(
          'assets/svgs/all_plan_home.svg',
          fit: BoxFit.cover, // 让SVG铺满容器
          clipBehavior: Clip.hardEdge, // 额外裁剪SVG自身溢出部分
        ),
        Center(
          child: Text(
            "All Plans",
            style: TextStyle(
              color: Colors.black,
              fontSize: 18,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
      ],
    ),
  ),
)

方案二：优化SVG文件（彻底解决溢出问题） #

修改SVG的尺寸、viewBox和内部图形坐标，让它完全匹配184*95的目标区域：

<svg width="184" height="95" viewBox="0 0 184 95" fill="none" xmlns="http://www.w3.org/2000/svg">
    <g filter="url(#filter0_d)">
        <rect width="184" height="95" fill="#BF0233"/>
        <g opacity="0.2">
            <path d="M167.017 17.893V8.8789" stroke="#011235" stroke-miterlimit="10"/>
            <path d="M161.977 13.3857H172.057" stroke="#011235" stroke-miterlimit="10"/>
            <path d="M20.6228 16L24.0869 10" stroke="#011235" stroke-miterlimit="10"/>
            <path d="M19 11.0625L25.7099 14.9365" stroke="#011235" stroke-miterlimit="10"/>
            <path d="M30 74L41 64" stroke="#011235" stroke-miterlimit="10"/>
            <path d="M30 64L41 74" stroke="#011235" stroke-miterlimit="10"/>
            <path d="M167.017 86.1215V77.1074" stroke="#011235" stroke-miterlimit="10"/>
            <path d="M161.977 81.6143H172.057" stroke="#011235" stroke-miterlimit="10"/>
        </g>
    </g>
    <defs>
        <filter id="filter0_d" x="-5" y="-5" width="194" height="105" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
            <feOffset dy="4"/>
            <feGaussianBlur stdDeviation="5"/>
            <feComposite in2="hardAlpha" operator="out"/>
            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0"/>
            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
        </filter>
    </defs>
</svg>

修改说明：

• 将SVG的width、height、viewBox统一设置为184*95
• 移除原图形的x=10/y=6偏移，让内容贴合SVG边界
• 删除多余的mask和clipPath，简化结构

内容的提问来源于stack exchange，提问作者Taimoor Khan