使用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标签内编辑线条标签

回答

相关问题