我试图设置一条svg线,以便它可以在所有设备上触及屏幕。在移动设备和屏幕较小的计算机上,线条会被切断,就像我图像中的底部示例一样。
我试图将<svg>
元素设置为具有绝对位置,但只是将其置于<div>
内更改它,甚至不给该div任何CSS样式。有什么建议吗?
答案 0 :(得分:4)
你需要将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;
}