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

Question

我试图设置一个svg线，这样它将在所有设备上都穿过屏幕。在移动设备和屏幕较小的计算机上，该行被切断，就像我图像中的底部示例一样。

我试图将<svg>元素设置为绝对位置，但是只是将其放在<div>更改中，甚至没有给div任何CSS样式。有什么建议么？

在这里摆弄

Answer 1

您需要将svg元素包装在div（.svg-container）中，该div 绝对位于.sec1要“删除” 的主要区域（）内。然后，需要在主区域上应用一个相对位置，以便包装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;
}

这是一个小提琴