如何定位svg以垂直填充可变高度的div

Question

我创建了一些svg图形，我想在一些可变高度的div中设置为背景。我试图将它们用作sprite，因此一个svg文件有几个组，每个组都有自己的id，我使用这些id来指定在每个div中渲染的背景。

这里有一个指向（非工作）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>

理想情况下，图形将与右侧对齐，并拉伸以填充div的高度。

感谢

Answer 1

由于您将SVG描述为"背景"，我认为您不需要它们来将文本推到一边。

在这种情况下，我建议对SVG使用绝对定位（相对于"盒子"容器）。使用绝对定位，即使父元素没有固定的高度，100%的高度也是有效的。

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