svg - SVG要素をsvg要素にラップする方法は?

Question

SVG グラフがウィンドウからはみ出し、スクロール バーが表示されません。

これは、svg 要素がウィンドウのサイズであり、実際の svg のサイズではないためです。

コンテンツをラップするようにsvg要素にプロパティを設定することは可能ですか（ag要素のように）？

Answer 1

ルート svg 要素に'viewBox' 属性を設定して、svg が完全に含まれるようにすることができます。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10020 30">
    <line x1="10" x2="10000" y1="10" y2="10" stroke-linecap="round" stroke="#1c94c4" stroke-width="3" />
</svg>

しかし、スクロールバーが欲しかったのではないでしょうか? その場合、CSS の幅 (または高さ) を適切なものに設定できます。

<svg xmlns="http://www.w3.org/2000/svg" style="width:10020px; height: 32px">
    <line x1="10" x2="10000" y1="10" y2="10" stroke-linecap="round" stroke="#1c94c4" stroke-width="3" />
</svg>