0

グラフ（円とエッジの束）divを含む要素があり、要素に属性も設定しています。グラフ内のノードとエッジの座標は、で指定された画面サイズ（したがって指定されたサイズでも）に対してハードコーディングされています。必要なサイズで、グラフは適切に読み込まれ、ブラウザウィンドウのサイズが変更されている間も拡大および縮小されます。svgviewBoxsvgdivpxdiv

ただし、画像が以前に指定されたサイズで同じままであるため、ページが別の画面/divサイズで読み込まれるたびに問題が発生します。これにより、ブラウザや画面のサイズを小さくするには大きすぎる画像が作成されます。svgdiv

svg要素に次のように設定します。

<svg id="mygraph" preserveAspectRatio="xMidYMid meet">

要素viewBoxの直後に、Javascriptを使用してその属性を設定します。div

<script type="text/javascript">
    document.getElementById("mygraph").setAttribute("viewBox", "0 0 " + $("#graphdiv").width() + " " + $("#graphdiv").height());
</script>

これは問題を解決しません。では、他に何を試すことができますか？

4

1 に答える 1

2

viewBoxは、svg内で使用される座標系を定義し、svgのサイズは変更しません。viewBoxがある場合は、svgの幅と高さを設定するだけで（たとえばCSSを使用）、そのサイズにレンダリングされます。

于 2012-09-04T09:25:04.397 に答える