CODEWITHSUNDEEP
htmlsvg
Jimmy
Jimmy

Reputation: 12517

SVG take up 400% of screensize

I'm trying to make my SVG take up 400% of the screen width and height so I can move it to change the gradient:

SVG 

html, body { 
    margin:0; 
    padding:0; 
    overflow:hidden;
}
svg { 
    position:fixed; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
    height: 400%;
    width: 400%;
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

  <defs>
    <linearGradient id="LinearGradient" x1="0%" y1="0%" x2="100%" y2="100%" spreadMethod="pad" gradientTransform="rotate(45)">
      <stop offset="0%" stop-color="#00cc00" stop-opacity="1" />
      <stop offset="100%" stop-color="#006600" stop-opacity="1" />
    </linearGradient>
  </defs>

  <rect x="0" y="0" width="100%" height="100%" style="fill:url(#LinearGradient);" />

</svg>

However, this doesn't even fill it up 100% of the screen, yet alone 400%!

Upvotes: 0

Views: 55

Answers (1)

Super User
Super User

Reputation: 9642

Just add your SVG CSS inside svg:not(:root). Check updated Snippet below

html, body { 
    margin:0; 
    padding:0;
    height: 100%;
}
/*svg { 
    position:fixed; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
    height: 400%;
    width: 400%;
}*/
svg:not(:root) {
    width: 400%;
    height: 400%;
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

  <defs>
    <linearGradient id="LinearGradient" x1="0%" y1="0%" x2="100%" y2="100%" spreadMethod="pad" gradientTransform="rotate(45)">
      <stop offset="0%" stop-color="#00cc00" stop-opacity="1" />
      <stop offset="100%" stop-color="#006600" stop-opacity="1" />
    </linearGradient>
  </defs>

  <rect x="0" y="0" width="100%" height="100%" style="fill:url(#LinearGradient);" />

</svg>

Upvotes: 2

Related Questions