使用javascript编辑svg标记内的行标记

我正在尝试创建一条从窗口一侧到另一侧的线。使用javascript，我希望它处于某个特定点。我想检测窗口大小和导航栏高度。我遇到的问题是没有显示该行

以下是我的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>

函数createLineScreenWidth（）{
var elem=getElementsByTagName（“svg”）[0]；
变量行=getElementsByTagName（“行”）[0]；
变量y_pos=getElementByID（“导航条”）。高度；
elem.style.height=“10”；
elem.style.width=屏幕宽度；
line.style.stroke=rgb（188204229）；
line.x2=屏幕宽度；
line.y1=line.y2=y_位置；
}
关于

ds
#导航栏{
位置：相对位置；
}
函数createLineScreenWidth（）{
var elem=document.getElementsByTagName（“svg”）[0]；
var line=document.getElementsByTagName（“行”）[0]；
var y_pos=document.getElementById（“navbar”）.clientHeight；
elem.style.height=“100”；
elem.style.width=屏幕宽度；
//line.style.stroke=“红色”；
//line.x2=屏幕宽度；
//line.y1=line.y2=y_位置；
line.setAttribute（'x1'，'0'）；
line.setAttribute（'y1'，y_pos）；
line.setAttribute（'x2'，屏幕宽度）；
line.setAttribute（'y2'，y_pos）；
setAttribute（“笔划”、“rgb（188、204、229）”）
子元素（行）；
}
关于

首先，您必须删除一些错误，其中有document.getElementsById和一些标记名第二，没有rgb函数，而是用双引号“rgb（0,0,0）”换行。我已经做了您提到的更改，但仍然不起作用。我不知道该怎么办。。顺便说一下，谢谢，我是说在我使用的IDE中。我使用atom作为IDE，当我在浏览器中尝试它时，问题不会改变