3

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

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;

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

4

1 回答 1

4

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

似乎 Dartium（带有本机 Dart VM 的 Chrome）有一个错误（问题 12224），其中对 viewBox 的更改不会直接反映。

在对 viewBox 进行更改后添加以下代码会强制 Dartium 以某种方式将大小调整为请求的大小：

    // add an empty ```<g>``` element to force svg resize
    SvgElement g = new SvgElement.tag('g');
    svg.append(g);
于 2013-12-30T13:17:27.850 回答