如何在 Flutter 中绘制大于父小部件的 SVG 图像

Question

我正在尝试渲染比 ViewBox 更大的 SVG 图像。为此，我使用了flutter_svg 0.19.0。由于某些原因，图像仅缩放到父小部件的边框。但是，如果我指定的尺寸小于 ViewBox，则图像会正确缩小。

创建 SVG 小部件：

 void setNewImage(String path) {
    setState(() {
      svg = SvgPicture.asset(
        path,
        alignment: Alignment.center,
        allowDrawingOutsideViewBox: true,
        width: 3000.0,
        height: 5000.0,
        clipBehavior: Clip.none,
      );
    });
  } 

父小部件：

Scaffold(
      resizeToAvoidBottomPadding: false,
      //avoid resize when keyboard is visible
      resizeToAvoidBottomInset: false,
      backgroundColor: Colors.transparent,
      body: ClipRRect(
        child: Container(
          color: Colors.transparent,
          child: svg
          )
        )
      )

您知道我该如何处理这个问题吗？使用 SizedBox，指定宽高的 Container 也不行。

---

编辑： 我通过将 svg Widget 插入到 Transform.scale() 小部件中找到了解决方案。

Scaffold(
      resizeToAvoidBottomPadding: false,
      //avoid resize when keyboard is visible
      resizeToAvoidBottomInset: false,
      backgroundColor: Colors.transparent,
      body: ClipRRect(
        child: Container(
          color: Colors.transparent,
          child: Transform.scale(
                     scale: 2,
                     alignment: Alignment.topLeft,
                     child: svg)
          )
        )
      )

Answer 1

也许你想使用OverflowBox：

Container(
  width: 80,
  height: 80,
  child: OverflowBox(
    alignment: Alignment.centerLeft,
    maxWidth: 120,
    child: Container(
      padding: EdgeInsets.all(12.0),
      decoration: BoxDecoration(
        color: Colors.amber,
        border: Border.all(color: Colors.brown, width: 3.0),
      ),
      child: SvgPicture.asset(
        'images/hello.svg',
        alignment: Alignment.center,
      ),
    ),
  ),
),

完整源代码：

import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: HomePage(),
    ),
  );
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
          width: 100,
          height: double.infinity,
          decoration: BoxDecoration(
            color: Colors.amber.shade200,
            border: Border(
              right: BorderSide(color: Colors.black45, width: 2.0),
            ),
          ),
          child: Column(
            children: [
              const SizedBox(height: 24.0),
              SvgPicture.asset(
                'images/hello.svg',
                alignment: Alignment.center,
                allowDrawingOutsideViewBox: true,
                width: 80.0,
              ),
              const SizedBox(height: 24.0),
              SvgPicture.asset(
                'images/hello.svg',
                alignment: Alignment.center,
                allowDrawingOutsideViewBox: true,
                width: 80.0,
              ),
              const SizedBox(height: 24.0),
              SvgPicture.asset(
                'images/hello.svg',
                alignment: Alignment.center,
                allowDrawingOutsideViewBox: true,
                width: 80.0,
              ),
              const SizedBox(height: 24.0),
              SvgPicture.asset(
                'images/hello.svg',
                alignment: Alignment.center,
                allowDrawingOutsideViewBox: true,
                width: 80.0,
              ),
              const SizedBox(height: 24.0),
              Container(
                width: 80,
                height: 80,
                child: OverflowBox(
                  alignment: Alignment.centerLeft,
                  maxWidth: 120,
                  child: Container(
                    padding: EdgeInsets.all(12.0),
                    decoration: BoxDecoration(
                      color: Colors.amber,
                      border: Border.all(color: Colors.brown, width: 3.0),
                    ),
                    child: SvgPicture.asset(
                      'images/hello.svg',
                      alignment: Alignment.center,
                    ),
                  ),
                ),
              ),
              const SizedBox(height: 24.0),
              SvgPicture.asset(
                'images/hello.svg',
                alignment: Alignment.center,
                allowDrawingOutsideViewBox: true,
                width: 80.0,
              ),
            ],
          )),
    );
  }
}