javascriptを使ってsvgタグ内にラインタグを編集する

ウィンドウの一方の側から他方の側に描画する線を作成しようとしています。 javascriptを使って、私はそれをある時点にしたい。ウィンドウサイズとナビゲーションバーの高さを検出したい私が持っていた問題は、ラインが表示されていないということでした。ここでjavascriptを使ってsvgタグ内にラインタグを編集する

は私のJavaScriptとHTMLコードです：

 <script> 
     function createLineScreenWidth() { 

      var elem = getElementsByTagName("svg")[0]; 
      var line = getElementsByTagName("line")[0]; 
      var y_pos = getElementByID("navbar").height; 

      elem.style.height = "10"; 
      elem.style.width = screen.width; 

      line.style.stroke = rgb(188, 204, 229); 
      line.x2 = screen.width; 
      line.y1 = line.y2 = y_pos; 
     } 
     </script> 
     <div class="navbar" id="navbar"> 
      <nav> 
       <a href="/contact/"><div class="pageIcon">CONTACT</div></a> 
       <a href="/products/"><div class="pageIcon">PRODUCTS</div></a> 
       <a><div class="pageIcon onpageIconChange">ABOUT</div></a> 
      </nav> 
     </div> 
     <svg onload="createLineScreenWidth()"> 
      <line x1="0" style="stroke-width: 2;" /> 
     </svg>

出典

2017-06-03 Andrew Serra

最初にやっていることがより明確である.setAttributeを使用してい第二を一切RGB関数ではなく、二重引用符「RGBでラップはありません（0,0,0） " – owaishanif786

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <title>ds</title> 
 
    <style> 
 
    #navbar{ 
 
     position: relative; 
 

 
    } 
 
    </style> 
 
</head> 
 
<body> 
 
    <script> 
 
    function createLineScreenWidth() { 
 

 
     var elem = document.getElementsByTagName("svg")[0]; 
 
     var line = document.getElementsByTagName("line")[0]; 
 

 
     var y_pos = document.getElementById("navbar").clientHeight; 
 

 

 
     elem.style.height = "100"; 
 
     elem.style.width = screen.width; 
 

 

 
     // line.style.stroke = "red"; 
 
     // line.x2 = screen.width; 
 
     // line.y1 = line.y2 = y_pos; 
 

 
     line.setAttribute('x1','0'); 
 
     line.setAttribute('y1',y_pos); 
 
     line.setAttribute('x2',screen.width); 
 
     line.setAttribute('y2',y_pos); 
 
     line.setAttribute("stroke", "rgb(188, 204, 229)") 
 
     elem.appendChild(line); 
 
    } 
 
    </script> 
 
    <div class="navbar" id="navbar"> 
 
    <nav> 
 
     <a href="/contact/"><div class="pageIcon">CONTACT</div></a> 
 
     <a href="/products/"><div class="pageIcon">PRODUCTS</div></a> 
 
     <a><div class="pageIcon onpageIconChange">ABOUT</div></a> 
 
    </nav> 
 
    </div> 
 
    <svg onload="createLineScreenWidth()"> 
 
    <line x1="0" style="stroke-width: 2;" /> 
 
    </svg> 
 
</body> 
 
</html>

実際document.get

が不足してエラー

の多くがあったことがclientHeightましたn otの高さ
代わりにrgb関数がありません。その値を二重引用符で囲む必要があります。
私はTagNameのためdocument.getElementsByIdといくつかがあるあなたには、いくつかのエラーを削除する必要があり、我々はIMO

出典

2017-06-03 19:34:57 owaishanif786

私はあなたが言及した変更を加えましたが、それでも動作しませんでした。私は何をすべきかわかりません。ところで、 –

スニペットコードを実行するとうまく動作します。 – owaishanif786

私はIDEで使用しています。私はIDEとして原子を使用し、私はブラウザでそれを試してみても問題は変わらない –

javascriptを使ってsvgタグ内にラインタグを編集する

答えて

関連する問題