有没有更简单的方法来调整 SVG 的大小？答案

【问题标题】：Is there an easier way to adjust the size of an SVG?有没有更简单的方法来调整 SVG 的大小？
【发布时间】：2021-11-11 16:14:31
【问题描述】：

我希望将 SVG 的图像切成两半。 SVG 是圆圈底部的较轻的波。它目前太高了，我需要将尺寸减小一半左右。我将 SVG 放在它自己的容器中，但是修改容器的大小并不能完全按照我期望的方式修改图像的大小。任何建议表示赞赏。

    return Container(
      decoration: bubbleBoxDecoration,
      height: bubbleDiameter.toDouble(),
      width: bubbleDiameter.toDouble(),
      child: Stack(
        children: [
          Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                Text(
                  'Upper Body',
                  style: labelTextStyle,
                ),
                Text(
                  '45',
                  style: weightTextStyle,
                ),
                Text(
                  'lbs',
                  style: unitTextStyle,
                ),
              ],
            ),
          ),
          Container(
            height: bubbleDiameter.toDouble(),
            width: bubbleDiameter.toDouble(),
            child: SvgPicture.asset(
              assetName,
              alignment: Alignment.bottomCenter,
            ),
          ),
        ],
      ),
    );
  }
}

【问题讨论】：

你试过了吗：SvgPicture.asset( assetName, alignment: Alignment.bottomCenter, width: 100, height: 100 ),

标签： flutter dart flutter-layout

【解决方案1】：

这里的关键是fit 参数。另外，既然要切掉底部，看到顶部，请使用Alignment.topCenter。

Container(
  height: bubbleDiameter.toDouble() / 2,
  width: bubbleDiameter.toDouble(),
  child: SvgPicture.asset(
    assetName,
    fit: BoxFit.fitWidth,
    alignment: Alignment.topCenter,
  ),
),

【讨论】：

【解决方案2】：

您可以在使用Stack 时欺骗用户界面，并按照您想要的方式调整图像大小。您需要调整图像大小并正确对齐。您的 code-sn-p 没有反映尺寸的唯一原因是，Stack child 需要像 Positioned / Align 这样的位置小部件来反映自定义尺寸。

 Positioned(
            bottom: -100,// bubbleDiameter.toDouble() the way you like to align
            child: SvgPicture.asset(
              assetName,
            height: bubbleDiameter.toDouble() * 2,
            width: bubbleDiameter.toDouble() *2,
              alignment: Alignment.bottomCenter,
            ),
          ),

【讨论】：

【解决方案3】：

您无法在 Flutter 中修改资产图像。即使可以，也不是很理想，因为它是一项资产，您可以删除、编辑和添加它，而不是每次运行应用程序时都修改资产。

【讨论】：