svg - 使用 viewBox 缩放 SVG(在 Dart 中)不起作用

Question

我最近开始使用 Google Dart (www.dartlang.org) 并尝试使用 SVG。我正在尝试缩放生成的 SVG 以适应 <div>使用 viewBox。

StackOverflow 上的人们已经给了我很多帮助。
我现在可以像这样缩放路径:Dart create and transform an SVG path

但是 viewBox 似乎是为适应缩放而制作的，使用它可以避免我单独缩放 svg 中的所有路径。这就是我想使用 viewBox 的原因。 我尝试了以下方法:

    // get bounding box of the created svg
    Rect bb = path.getBBox();

    // create a viewBox for the svg to fit in the div
    var viewBox = svg.viewBox.baseVal
    ..x = bb.x
    ..y = bb.y
    ..width = bb.width
    ..height = bb.height;

    // center the image inside the div
    svg.preserveAspectRatio.baseVal
    ..meetOrSlice = PreserveAspectRatio.SVG_MEETORSLICE_MEET
    ..align = PreserveAspectRatio.SVG_PRESERVEASPECTRATIO_XMIDYMID;

但是没有缩放发生。我将如何解决这个问题？

Answer 1

在写这个问题并重试以确保我在问这里之前尝试过任何事情时，我找到了以下解决方案。

似乎 Dartium(带有原生 Dart VM 的 Chrome)有一个错误(issue 12224)，其中对 viewBox 的更改不会直接反射(reflect)出来。

在更改 viewBox 后添加以下代码会强制 Dartium 以某种方式调整到请求的大小:

    // add an empty ```<g>``` element to force svg resize
    SvgElement g = new SvgElement.tag('g');
    svg.append(g);