Editing a line tag inside svg tag using javascript

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. 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:

      <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
it was clientHeight not height
there is no rgb function instead you have to wrap that value in double quotes
last but not least instead of line. I'm using .setAttribute which is more clear what we are doing IMO

Editing a line tag inside svg tag using javascript

Question

1 answers

solution1
0 2017-06-03 19:34:57

Editing a line tag inside svg tag using javascript

Question

1 answers

solution1 0 2017-06-03 19:34:57

solution1
0 2017-06-03 19:34:57