Question

我最近开始使用Google Dart（www.dartlang.org）并使用SVG。我正在尝试使用viewBox扩展生成的SVG以适合<div>。

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的更改不会直接反映。

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

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

使用viewBox缩放SVG（在Dart中）不起作用

1 个答案: