CODEWITHSUNDEEP
htmlcsssvg
Jimmy
Jimmy

Reputation: 12487

SVG fit containing element

This is my code: http://jsfiddle.net/t5rhp/4/

I am trying to make it so the SVG expands and contracts to fill the blue area. For the life of me, I cannot understand why it doesn't appear, as I have set the svg properties to 100% width and height.

HTML

<svg viewBox="0 0 100 100">
...

CSS

svg {
    width:100%;
    height:100%;
    position:absolute;
    z-index:0;
}

What am I doing wrong here?

Upvotes: 0

Views: 695

Answers (1)

G-Cyrillus
G-Cyrillus

Reputation: 105853

If you give your SVG a viewbox set to 0 0 100 100 , make sur you draw your element within this area .

<svg viewBox="0 0 100 100">
...
    <rect x="188" y="832"

and so on , you cannot expect to see anything there standing further than x='100' y='100'

To explain: if you reset viewbox to 0 0 1000 1000 then the show goes on

Upvotes: 1

Related Questions