Bearbeiten einer Zeile Tag innerhalb Svg-Tag mit Javascript

Ich versuche, eine Linie zu erstellen, um von einer Seite des Fensters auf die andere zu zeichnen. Mit Javascript möchte ich es an einem bestimmten Punkt sein. Ich möchte die Fenstergröße und die Höhe der Navigationsleiste erkennen. Das Problem, das ich hatte, war, dass die Linie nicht angezeigt wird.Bearbeiten einer Zeile Tag innerhalb Svg-Tag mit Javascript

Hier ist mein Javascript und 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>

Quelle

2017-06-03 Andrew Serra

Erste tun haben Sie einige Fehler entfernen dort document.getElementsById ist und einige für TagName 2. es gibt keine rgb Funktion wickeln statt in doppelte Anführungszeichen „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>

Eigentlich gab es viele Fehler

fehlt document.get
es war client n ot Höhe
gibt es keine rgb-Funktion stattdessen müssen Sie diesen Wert in doppelte Anführungszeichen
last but not least anstelle der Zeile umbrechen. Ich verwende .setAttribute die mehr klar ist, was wir IMO

Quelle

2017-06-03 19:34:57 owaishanif786

Ich habe die von Ihnen erwähnten Änderungen vorgenommen, aber es hat immer noch nicht funktioniert. Ich bin mir nicht sicher, was zu tun ist .. Übrigens danke –

Wenn Sie den Code-Schnipsel laufen, funktioniert es gut. – owaishanif786

Ich meine in der IDE die ich benutze. Ich benutze Atom als eine IDE und wenn ich es dann in einem Browser versuche, ändert sich das Problem nicht –

Bearbeiten einer Zeile Tag innerhalb Svg-Tag mit Javascript

Antwort

Verwandte Themen