Modification d'une ligne à l'intérieur de la balise svg à l'aide de javascript

J'essaie de créer une ligne pour dessiner d'un côté de la fenêtre à l'autre. En utilisant javascript je veux que ce soit à un certain point. Je veux détecter la taille de la fenêtre et la hauteur de la barre de navigation. Le problème que j'avais était que la ligne n'est pas affichée.Modification d'une ligne à l'intérieur de la balise svg à l'aide de javascript

Voici mon javascript et le code 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>

Source

2017-06-03 Andrew Serra

vous devez d'abord supprimer certaines erreurs il y a document.getElementsById et certains pour TagName 2 il n'y a pas de fonction de la place rgb envelopper dans des guillemets doubles « 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>

En fait, il y avait beaucoup d'erreurs

manquantes document.get
était clientHeight n hauteur
il n'y a pas de fonction rgb à la place, vous devez envelopper cette valeur entre guillemets
last but not least au lieu de ligne. J'utilise .setAttribute qui est plus clair ce que nous faisons l'OMI

Source

2017-06-03 19:34:57 owaishanif786

J'ai fait les changements que vous avez mentionnés mais cela n'a toujours pas fonctionné. Je ne sais pas quoi faire .. Par ailleurs, merci –

si vous exécutez le code de l'extrait fonctionne très bien. – owaishanif786

Je veux dire dans l'IDE que j'utilise. J'utilise l'atome comme IDE et quand je l'essaie dans un navigateur, le problème ne change pas –

Modification d'une ligne à l'intérieur de la balise svg à l'aide de javascript

Répondre

Questions connexes