CODEWITHSUNDEEP
svg
Simon
Simon

Reputation: 2115

How to wrap SVG elements into the svg element?

My SVG graph is going out of the window and there are no scroll bars.

That is because the svg element is the size of the window, and not the size of the actual svg stuff.

Is it possible to set some property on the svg element so it wraps the content (like a g element) ?

Upvotes: 2

Views: 664

Answers (1)

Erik Dahlström
Erik Dahlström

Reputation: 60966

You can set the 'viewBox' attribute on the root svg element so that it contains your svg fully, e.g:

<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>

But maybe you wanted scrollbars? In that case you can set the CSS width (or height) to something suitable, e.g:

<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>

Upvotes: 1

Related Questions