Question

我已经创建了一些svg图形，我想在一些可变高度div中设置为背景。我试图将它们用作精灵，所以一个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描述为＆＃34;背景＆＃34;，我认为您不需要它们来推送文本。

在这种情况下，我建议对SVG使用绝对定位（相对于＆＃34;框＆＃34;容器）。使用绝对定位，即使父元素没有固定高度，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/

如何定位svg垂直填充变量高度div？

1 个答案: