3

最近、Google Dart (www.dartlang.org) を使い始め、SVG をいじり始めました。ビューボックスを使用して、生成された SVG をサイズに合わせてスケーリングしようとして<div>います。

StackOverflow のユーザーは、すでに多くの支援をしてくれました。
次のようにパスをスケーリングできるようになりました: Dart create and transform an SVG path

しかし、viewBox は scale-to-fit 用に作成されているようで、それを使用すると、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) には、viewBox への変更が直接反映されないバグ (問題 12224 ) があるようです。

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 に答える