CODEWITHSUNDEEP
svg
Ali Torbati
Ali Torbati

Reputation: 398

How to position an svg to vertically fill a variable height div?

I've created some svg graphics that I would like to set as backgrounds in some variable height divs. I'm trying to use them as a sprite, so one svg file has a few groups, each with its own id, and I'm using those ids to specify which background is rendered in each div.

Here's a link to a (non-working) JSFiddle.

HTML:
<svg width="0" height="0">
  <defs>
    <!-- BLUE GRAPHIC -->
    <g id="blue_background">
      <polygon fill="#C8D9E5" points="[...in the fiddle...]"/>
    </g>

    <!-- GREEN GRAPHIC -->
    <g id="green_background">
      <path fill="#49B974" d="[...in the fiddle...]"/>
    </g>
  </defs>
</svg>


<div class="box">
    <h1>asdasdasd</h1>
    <h1>asdasdasd</h1>
    <h1>asdasdasd</h1>
    <svg class="svg1" viewBox="0 0 600 200" >
        <use xlink:href="#blue_background" width="100%" height="100%"></use>
    </svg>
</div>

<div class="box">
    <h1>asdasdasd</h1>
    <h1>asdasdasd</h1>
    <h1>asdasdasd</h1>
    <svg class="svg2" viewBox="0 0 200 200">
        <use xlink:href="#green_background" width="100%" height="100%"></use>
    </svg>
</div>

Ideally the graphic would be aligned with the right side, and stretch to fill the div's height.

Thanks

Upvotes: 0

Views: 685

Answers (1)

AmeliaBR
AmeliaBR

Reputation: 27534

Since you're describing your SVGs as "backgrounds", I assume you don't need them to push text out of the way.

In that case, I would recommend using absolute positioning for the SVGs (relative to the "box" containers). With absolute positioning, a height of 100% is valid even if the parent element doesn't have fixed height.

.box {
    position: relative;
    width: 400px;
    border: 1px solid #ddd;
}
svg {
    position:absolute;
    height:100%;
    top:0; right:0;
    z-index:-1;
}

http://jsfiddle.net/svag2/1/

Upvotes: 1

Related Questions