svg元素的绝对定位不起作用

Question

我试图设置一条svg线，以便它可以在所有设备上触及屏幕。在移动设备和屏幕较小的计算机上，线条会被切断，就像我图像中的底部示例一样。

我试图将<svg>元素设置为具有绝对位置，但只是将其置于<div>内更改它，甚至不给该div任何CSS样式。有什么建议吗？

Fiddle here

Answer 1

你需要将svg元素包装在一个div（.svg-container）中，该div绝对位于你想要它的主区域（.sec1）内并且通过＆＃34;。然后主要区域需要应用相对位置，以便包装器div知道相对于以下位置的位置：

<强> HTML

<div class="sec1">
  <div class="svg-container">
   <svg height='100%' width='100%' xmlns='http://www.w3.org/2000/svg'>
    <line stroke='#5AB1BB' stroke-width='2' x1='0' x2='10000' y1='0' y2='10000'></line></svg>
  </div>
  <div class="w3-container">
    <div class="maintitlesection">
      <div class="title">
        William Stinson
      </div>
      <p>Computers, graphics, photo and video (and lots more).</p>
    </div>
  </div>
</div>

<强> CSS

.sec1 {
  position: relative;
}

.svg-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.maintitlesection {
  position: absolute;
  width: 300px;
  right: 30px;
}

Here's a fiddle