svg要素の絶対配置が機能しない

Question

すべてのデバイスで画面を取り消すようにsvg行を設定しようとしました。モバイルデバイスや画面の小さいコンピュータでは、画像の下の例のように、線が途切れてしまいます。

私は絶対的な位置を持っている<svg>要素を設定しようとしましたが、ちょうど<div>内側に入れても、それがどのCSSスタイルをDIV与えることなく、それを変更します。助言がありますか？

Fiddle here

Answer 1

div要素（.svg-container）内にsvg要素をラップする必要があります。メイン領域（.sec1）の内側に絶対配置されています。

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; 
} 

：メインエリアは、その後に自身が相対位置するラッパーのdivが知っているので、それに適用される相対的な位置を持っている必要がありますHere's a fiddle

Answer 2

これは少し愚かに見えるかもしれませんが、なぜあなただ​​けの行のためにSVGを使用しているのでしょうか？ HTML Canvasでこれを実現できます。