使用JavaScript编辑svg标记内的line标记

Question

I am trying to create a line to draw from one side of the window to the other. 我正在尝试创建一条线以从窗口的一侧绘制到另一侧。 Using javascript I want it to be at a certain point. 使用javascript我希望它在某个时刻。 I want to detect window size and the nav bar height. 我想检测窗口大小和导航栏高度。 The problem I had was that the line is not being displayed. 我的问题是未显示该行。

Here is my javascript and html code: 这是我的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>

Answer 1

 <!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>

Actually there were lot of errors 其实有很多错误

missing document.get 缺少document.get
it was clientHeight not height 是clientHeight而不是height
there is no rgb function instead you have to wrap that value in double quotes 没有rgb函数，您必须将该值用双引号引起来
last but not least instead of line. 最后但并非最不重要的是代替线。 I'm using .setAttribute which is more clear what we are doing IMO 我正在使用.setAttribute，这更清楚了我们在做什么IMO

使用JavaScript编辑svg标记内的line标记

问题描述

1 个解决方案

解决方案1
0 2017-06-03 19:34:57

使用JavaScript编辑svg标记内的line标记

问题描述

1 个解决方案

解决方案1 0 2017-06-03 19:34:57

解决方案1
0 2017-06-03 19:34:57