边缘不尊重SVG上的变换原点

Question

我有一辆车想要作为SVG的一部分动态旋转：

<g id="top-view-vehicle-12" transform="translate(17.000000, 25.000000) rotate(`${heading}`)" transform-origin="11 25" fill-rule="evenodd">

在Chrome中运行良好，但Edge并不尊重transform-origin并且车辆放错地方。知道如何让<g>元素居中吗？

https://codepen.io/anon/pen/qpXYBy

Answer 1

不出所料， new Container( child: new Material( child: new InkWell( onTap: () => null, // ReplaceMe enableFeedback: true, child: new Column( crossAxisAlignment: CrossAxisAlignment.stretch, children: <Widget>[ new Expanded( child: new Container( child: new Icon( Icons.battery_charging_full, // ReplaceMe size: 40.0, ), color: Colors.purple.shade200, // ReplaceMe ), ), new Container( height: 30.0, color: Colors.grey[200], child: new Center( child: new Text( "Energy", // ReplaceMe textAlign: TextAlign.center, ), ), ), ], ), ), ), height: 100.0, // DeleteMe needed just for test ), 不是规范的一部分：

https://www.w3.org/TR/SVG11/struct.html#GElement

Trick是在变换中应用原点：

transform-origin