SVGをコンテナのサイズに合わせて描画するにはどうすればよいですか？

私はD3.jsコンポーネントを持っており、受け取ったデータに基づいてチャートを動的にレンダリングします。私の問題は、膨大な数のデータを受け取ったときにコンポーネントが大きくなり（各ビジュアル要素のサイズがあらかじめ定義されているため）、コンポーネントをリファクタリングして画面に収まるようにすべての要素のサイズを計算したくないということです。SVGをコンテナのサイズに合わせて描画するにはどうすればよいですか？

出典

2017-11-28 Ioan Ungurean

SVG属性preserveAspectRatioは、均一スケーリングを強制するかどうかを示します。

xMinYMin - 均一なスケーリングを強制します。要素のviewBoxを、ビューポートの最小のX値に揃えます。要素のviewBoxをビューポートの最小のY値に揃えます。

<svg preserveAspectRatio="xMinYMin" viewBox="0 0 300 100"></svg>

注意widthとheight属性とは対照的に、viewBoxです。

出典

2017-11-29 03:42:29 ksav

私は既に 'preserveAspectRatio'を追加しました。レンダリング時にコンテナの幅と高さを得るために' viewBox'が動的に追加されましたが、SVGを表示に合わせて縮尺しないものは何もしません。 –

より良いコードを投稿してください。 jsfiddle、codepen、plunkerなどパズルの最後の部分は単純なCSSの問題です – ksav

viewBoxのある部分は機能しますが、コンポーネントを描画してコンポーネントの最大幅と高さを知ってから追加する必要があります。この小道具を使用すると、コンポーネントをビューに合わせることができます。この[リンク]（https://stackoverflow.com/questions/19484707/how-can-i-make-an-svg-scale-with-its-parent-container）は私を大いに助けました。 –

SVGをコンテナのサイズに合わせて描画するにはどうすればよいですか？

答えて

関連する問題