使用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

首先什麼，除去一些誤差存在document.getElementsById有的標記名第二個沒有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的ñ ot高度
沒有rgb功能，而是必須將該值用雙引號括起來，但不是最後一行，而是用雙引號
。我使用.setAttribute哪個更清楚你我們正在做的IMO

來源

2017-06-03 19:34:57 owaishanif786

我已經做出了你提到的改變，但它仍然沒有奏效。我不知道該怎麼辦..順便說一句，謝謝 –

，如果你運行的代碼段代碼工作正常。 – owaishanif786

我的意思是在我使用的IDE中。我使用atom作爲IDE，然後當我在瀏覽器中嘗試時，問題不會改變 –

使用javascript在svg標籤內編輯線條標籤

回答

相關問題