Flutter for Web で SVG の viewBox

Android や iOS では問題なかったのですが、Flutter for Web で 上手くSVGが表示できなかったので..

viewBox tag に対応した SVG を 表示する Widget を作ってみた。
たぶん、今後、既にあるイケてるプラグインが対応するだろうから
今だけ使うよう..

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


class TwitterIcon extends StatelessWidget {

  final double w;
  final double h;
  final double viewBoxX;
  final double viewBoxY;
  final double viewBoxW;
  final double viewBoxH;
  double devicePixelRatio = 1.0;

  TwitterIcon(this.w, this.h, this.viewBoxX, this.viewBoxY,this.viewBoxW, this.viewBoxH) :super() {

  }

  final paths = [
    ["M23.643 4.937c-.835.37-1.732.62-2.675.733.962-.576 1.7-1.49 2.048-2.578-.9.534-1.897.922-2.958 1.13-.85-.904-2.06-1.47-3.4-1.47-2.572 0-4.658 2.086-4.658 4.66 0 .364.042.718.12 1.06-3.873-.195-7.304-2.05-9.602-4.868-.4.69-.63 1.49-.63 2.342 0 1.616.823 3.043 2.072 3.878-.764-.025-1.482-.234-2.11-.583v.06c0 2.257 1.605 4.14 3.737 4.568-.392.106-.803.162-1.227.162-.3 0-.593-.028-.877-.082.593 1.85 2.313 3.198 4.352 3.234-1.595 1.25-3.604 1.995-5.786 1.995-.376 0-.747-.022-1.112-.065 2.062 1.323 4.51 2.093 7.14 2.093 8.57 0 13.255-7.098 13.255-13.254 0-.2-.005-.402-.014-.602.91-.658 1.7-1.477 2.323-2.41z", Colors.blue],
  ];

  @override
  Widget build(BuildContext context) {
    this.devicePixelRatio =  MediaQuery.of(context).devicePixelRatio;
    return Container(
        width: w,
        height: h,
        child: CustomPaint(
          painter: TwitterIconPainter(this) ,
        ),
        color: Colors.blueGrey,
    );
  }

}

class TwitterIconPainter extends CustomPainter {
  final bool showPath;
  final TwitterIcon parenrt;
  TwitterIconPainter(this.parenrt,{this.showPath = true});

  @override
  void paint(Canvas canvas, Size size) {
    //print("paint 00 ${paths}");
    // device ratio
    var drm = Matrix4.identity();
    //drm.scale(this.parenrt.devicePixelRatio, this.parenrt.devicePixelRatio);

    var viewboxWH = Matrix4.identity();
    double widthScale = this.parenrt.w/this.parenrt.viewBoxW;
    double heightScale = this.parenrt.h/this.parenrt.viewBoxH;
    drm.scale(widthScale, heightScale);
    
    canvas.transform(drm.multiplied(viewboxWH).storage);

    //
    canvas.clipRect(Rect.fromLTRB(0.0, 0.0, this.parenrt.viewBoxW, this.parenrt.viewBoxH));

    // viewbox x,y
    var viewboxXY = Matrix4.translationValues(-1*this.parenrt.viewBoxX, -1*this.parenrt.viewBoxY, 0.0);
    canvas.transform(viewboxXY.storage);

    for(var e in this.parenrt.paths){
      //print("print ${e}");
      Path path = parseSvgPath(e[0]);
      Color color = e[1];
      var paint = Paint()
        ..color = color
        ..strokeWidth = 4.0;
      canvas.drawPath(path, paint);
      if (showPath) {
        var border = Paint()
          ..color = Colors.black
          ..strokeWidth = 1.0
          ..style = PaintingStyle.stroke;
        canvas.drawPath(path, border);
      }
    }
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}