9

サイズ変更可能なdivがあります。2つの内部divがあります。内部divの1つにsvg要素が含まれています。

svg要素では、コンテンツを動的に追加および削除して、毎回svgに何かを追加するようにしています。20pxを追加して高さを増やし、削除すると高さを20px減算します。svgの高さが親のdivより大きくなると、親のdivにスクロールバーが表示されます。同様に、svgの高さが親のdivより小さい場合、スクロールバーは削除されます。

サイズ変更を行うと問題が発生します。サイズを変更するために、svgにビューボックスオプションを追加しました。しかし、サイズを大きくすると、svg要素の一部が表示されなくなります。サイズを小さくすると、svgが低い位置に配置され、空きスペースが残ります。

ビューボックスプロパティでsvgの位置/高さを処理する方法が頭に浮かびました。

どういうわけか、動作をシミュレートするためにフィドルを作成しようとしました。ただし、ここではsvgの要素は動的に追加されておらず、svgの高さは一定です。

私のコードへのリンク

どんな助けでもありがたいです

4

1 に答える 1

8

最新の更新：

SVGを使用する場合に最も重要なのは、仕様に精通するか、J。Eisenbergによる「SVGEssentials」のような明確なガイドを読むことです。これは、最初はそれほど些細なことではないからです。

それから私があなたを正しく理解したなら、別のアプローチjsFiddleがあります。

まず、viewBox属性の値を正しく設定します。現在の例では、すべてのコンテンツが表示されるようにする必要があります（最後のグループが変換さviewBox="0 0 130 220"れる原因として、最後の数値として少なくとも220を指定する必要があります。つまり、座標系が200単位に移動します。そうしないと、コンテンツは表示されません。これは、ビューボックスの最も外側のyポイント（jsfiddleでは70に設定されている）をはるかに超えているためです。<g>

次に、正しい値を指定します。preserveAspectRatioこれpreserveAspectRatio="xMinYMax meet"は、（J。Eisenbergによる「SVGEssentials」の提供）を意味します。

ビューボックスの最小xをビューポートの左隅に揃えます。

viewBoxの最大y値をビューポートの下端に揃えます。

meetコンテンツが収まらない場合は、スライスするのではなく、コンテンツを満たすことを意味します。

第三に、svgの下部に要素を追加する場合は、viewBoxそれに応じて値を変更する必要があります。それに、次のように挿入する場合に発生します。

<g transform="translate(0, 300)">
     <text>text 55 </text>
</g>

これは、最大yポイントが220であるviewBoxの周囲で発生します（前に述べたように設定する場合）

今のところそれが役立つことを願って、私に知らせてください。

古いもの

style="height:200px"あなたのsvgから削除します

次に、高さが必要な場合は、高さを動的に変更できますsvg

var $wrapper = $('#resize'),
    $svg = $('#svg2');
$wrapper.resizable({
    handles: 'se',
    aspectRatio: 400/200,
    resize: function(ev, ui) {
        $svg.css('height', ui.size.height);
    }
});

'#resize'-idのラッパーのsvg

私は今あなたが欲しいものについて非常に混乱しています。viewboxでattrを指定しましたsvg。つまり、あなたの一部だけsvgが表示されます。削除viewboxして、結果が満足のいくものに見えるかどうかを確認してください。

その後、すべて表示され、通常は親divに調整されます

于 2012-07-27T07:45:12.777 に答える