Mon diagramme SVG, créé en JS ne s'affiche pas correctement.

Bonjour,
Je souhaite crée un graphique svg dans mon html, en utilisant le JavaScript.
Dans l'inspecteur je retrouve tous les éléménts, qui semblent avoir les bons attributs, seulement à l'affichage je ne voit rien car la dimension horizontale est de "zéro".



Comment afficher correctement mon graphique?

Mon code JS HTML et CSS ci dessous.

// CREER UNE LIGNE DE CONTROLE
//compteur de ligne
let n_ligne=0;
let fac = document.getElementById('id_fac');
document.getElementById('coteLin').addEventListener('click',f_cotelineaire);


function drawLine(str_name,id_graphe,clName,graphe,x1,y1,x2,y2){
  let name = document.createElement("line");
  name.setAttribute("id",id_graphe+str_name);
  name.setAttribute("class",clName);
  name.setAttribute("x1",x1);
  name.setAttribute("y1",y1);
  name.setAttribute("x2",x2);
  name.setAttribute("y2",y2);
  graphe.appendChild(name);
}

function ecriture(str_name,id_graphe,clName,graphe,x1,y1,val){
  let name = document.createElement("text");
  name.setAttribute("id",id_graphe+str_name);
  name.setAttribute("class",clName);
  name.setAttribute("x1",x1);
  name.setAttribute("y1",y1);
  name.innerHTML=val;
  graphe.appendChild(name);
}

function f_cotelineaire(){
    n_ligne+=1;
  
  //ligne de controle
    let lgn_controle = document.createElement("div");
    lgn_controle.setAttribute("id",'idControle_'+ n_ligne);
    lgn_controle.setAttribute("class","classControle");
    let lgn_data = document.createElement("div");
    lgn_data.setAttribute("id",'idData_'+ n_ligne);
    lgn_data.setAttribute("class","classData");    
    let lgn_graphe = document.createElement("div");   
    lgn_graphe.setAttribute("id",'idGraphe_'+ n_ligne);
    lgn_graphe.setAttribute("class","classGraphe");
    lgn_controle.appendChild(lgn_data);
    lgn_controle.appendChild(lgn_graphe);    
    fac.appendChild(lgn_controle);
  //Numéro de cote
    let numCote=document.createElement("p");
    numCote.innerHTML=n_ligne;
    numCote.setAttribute("class","classNumCote");
    lgn_data.appendChild(numCote);
  // Valeur nominal  
    let valNominale=document.createElement("p");
    let valNom = 20; //prompt("Entre la valeur nominale");
    valNominale.innerHTML=valNom;
    valNominale.setAttribute("class","classNominale");
    lgn_data.appendChild(valNominale);
  // Tolérance inferieure  
    let toleranceInf = document.createElement("p");
    let tolInf = -1 ;//prompt("Entre la tolérance inférieure");
    toleranceInf.innerHTML=tolInf;
    toleranceInf.setAttribute("class","classTol_inf");
    lgn_data.appendChild(toleranceInf);
  // Tolérance inferieure  
    let toleranceSup = document.createElement("p");
    let tolSup = "+1" ; //prompt("Entre la tolérance supérieure");
    toleranceSup.innerHTML=tolSup;
    toleranceSup.setAttribute("class","classTol_sup");
    lgn_data.appendChild(toleranceSup);
  // Fréquence de controle  
    let frequence = document.createElement("p");
    let fz = "1/15" ; //prompt("Entre la fréquence de controle");
    frequence.innerHTML=fz;
    frequence.setAttribute("class","classFrequence");
    lgn_data.appendChild(frequence);
  //  Outil de controle 
    let instrument = document.createElement("p");
    let instrumentControle = "Pied à coulisse"; //prompt("Instrument de controle");
    instrument.innerHTML = instrumentControle;
    instrument.setAttribute("class","classInstrument");
    lgn_data.appendChild(instrument);
  // Commentaire
    let comment = document.createElement("p");
    let commentaire = "Rien à signaler"; //prompt("Entrer un commentaire sur la cote à controler");
    comment.innerHTML = commentaire;
    comment.setAttribute("class","classCommentaire");
    lgn_data.appendChild(comment);
  // Avant dernière valeur
    let av_derniere_valeur = document.createElement('p');
    av_derniere_valeur.setAttribute("class","classAvDer"); 
    lgn_data.appendChild(av_derniere_valeur);
  // Avant dernière valeur
    let derniere_valeur = document.createElement('p');
    derniere_valeur.setAttribute("class","classDer"); 
    lgn_data.appendChild(derniere_valeur);    
  
  // ******************
  // ***** Graphe *****
  // ******************
    let id_graphe = 'id_graphe'+ n_ligne;
    let graphe = document.createElement("svg");
    graphe.setAttribute('id',id_graphe);
    graphe.setAttribute("class","classGraphe");
    graphe.setAttribute("width","600");
    graphe.setAttribute("height","75");
    graphe.setAttribute("viewBox","0 0 600 50");
    // graphe.setAttribute("xmlns","http://www.w3.org/2000/svg")
  //Rectangle de fond
    let rect1 = document.createElement("rect");
    rect1.setAttribute("id",id_graphe+"rect1");
    rect1.setAttribute("class","classRect1");
    rect1.setAttribute("width","330");
    rect1.setAttribute("height","50");
    graphe.appendChild(rect1);
  //ligne des X
    drawLine('axeX',id_graphe,"axe",graphe,0,25,330,25);
  //ligne des Y
    drawLine('axeY',id_graphe,"axe",graphe,20,0,20,50);
  
/*

    //ligne tolerance supérieur
    drawLine('tolSup',id_graphe,"tolerance",graphe,20,5,330,5);
  //ligne de tolerance inferieure
    drawLine('tolInf',id_graphe,"tolerance",graphe,20,45,330,45);
  //ligne seuil capabilité supérieure
    drawLine('capaSup',id_graphe,"capa",graphe,20,11,330,11);
  //ligne seuil capabilité inférieure
    drawLine('capaInf',id_graphe,"capa",graphe,20,39,330,39);
  // marqueur abcisse 5
    drawLine('mark5',id_graphe,"mark5",graphe,70,0,70,50);
  // marqueur abcisse 10
    drawLine('mark10',id_graphe,"mark10",graphe,120,0,120,50);
  // marqueur abcisse 15
    drawLine('mark15',id_graphe,"mark5",graphe,170,0,170,50);
  // marqueur abcisse 20
    drawLine('mark20',id_graphe,"mark10",graphe,220,0,220,50);
  // marqueur abcisse 25
    drawLine('mark25',id_graphe,"mark5",graphe,270,0,270,50);
  // marqueur abcisse 30
    drawLine('mark30',id_graphe,"mark10",graphe,320,0,320,50);
  // texte valeur nominale
    ecriture('valNominale',id_graphe,"axe",graphe,2,24,20);
  // texte valeur tolerance superieure
    ecriture('valTolSup',id_graphe,"tolerance",graphe,2,7.0,20.20);
  // texte valeur tolerance inferieure
    ecriture('valTolInf',id_graphe,"tolerance",graphe,2,47.0,19.80);
  // texte valeur capabilite superieure
    ecriture('valCapaSup',id_graphe,"capa",graphe,2,13,20.13);
  // texte valeur capabilité inférieure
    ecriture('valCapaInf',id_graphe,"capa",graphe,2,41.0,19.87);    
  // texte marqueur X 0
    ecriture('mark0',id_graphe,"mark10",graphe,70,49,0);
  // texte marqueur X 5
    ecriture('mark5',id_graphe,"mark5",graphe,70,49,5);
  // texte marqueur X 10
    ecriture('mark10',id_graphe,"mark10",graphe,120,49,10);
  // texte marqueur X 15
    ecriture('mark15',id_graphe,"mark5",graphe,170,49,15);
  // texte marqueur X 20
    ecriture('mark20',id_graphe,"mark10",graphe,220,49,20);
  // texte marqueur X 25
    ecriture('mark25',id_graphe,"mark5",graphe,270,49,25);
  // texte marqueur X 30
    ecriture('mark30',id_graphe,"mark10",graphe,320,49,30);
  // data path de la courbe
   let courbe = document.createElement("path");
   let data ="M30 20.5 L40 18 L50 20 L60 25 L70 17.5 L80 21 L90 18.5 L100 15 L110 8 L120 38 L130 19 L140 30 L150 8 L160 8 L170 38 L180 19 L190 30 L200 8";
   courbe.setAttribute("id",id_graphe+courbe);
   courbe.setAttribute("class","class"+courbe);
   courbe.setAttribute("d",data);
   graphe.appendChild(courbe);

*/

   lgn_graphe.appendChild(graphe);

    //alert ('n_ligne = ' + n_ligne);
}

var graphe1 = document.getElementById("id_graphe1");

CSS:

#id_fac {
    width: 297mm;
    height: 210mm;
    border: 1px;
    border-color: black;
    border: solid;
}

svg {
   /* border:1px, solid, black;*/
    width: 650px;
    height: 75px;
    background-color: rgb(180, 180, 210);
}

#coteLin{
    width: 130px;
    height: 60px;
}
#coteGeo{
    width: 130px;
    height: 60px;
}

.classData{grid-area: data;}
.classGraphe{grid-area: graphe;}

.classNumCote{grid-area: numCote;}
.classNominale {grid-area: nominal;}
.classTol_sup{grid-area: tol_sup;}
.classTol_inf{grid-area: tol_inf;}
.classFrequence{grid-area: frequence;}
.classInstrument{grid-area: instrument;}
.classAvDer{grid-area: avDer;}
.classDer{grid-area: der;}
.classCommentaire{grid-area: commentaire;}

.classData{
    display: grid;
    grid-template-areas:
        'numCote nominal tol_sup frequence avDer der'
        'numCote nominal tol_inf instrument avDer der'
        'commentaire commentaire commentaire commentaire commentaire commentaire' ;
    grid-gap:2px;
    background-color: rgb(245, 124, 124);
    border: 3px double rgb(252, 9, 1);
    font-size: 12px;
    padding: 1px;
    margin: 1px;
}

.classData > p {
    background-color: rgba(241, 240, 245, 0.705);
    text-align: center;
    padding: 1px 0;
    margin: 1px;
    width: auto;
}
.classGraphe{
    border: 1px solid black;
}

.classControle{
    display: grid;
    grid-template-areas: 'data graphe';
}

.axe{
    stroke-width: 1px;
    stroke: black;
}

.tolerance{
    stroke-width: 0.4;
    stroke: red;

}

.capa{
    stroke: rgb(40, 240, 40);
    stroke-width: 0.4;
}

.mark5{
    stroke: black;
    stroke-width: 0.35;
    stroke-dasharray: 3,3;
    font-size: 5px;
}

.mark10{
    stroke: black;
    stroke-width: 0.35;
    font-size: 5px;
}

.classcourbe{
    stroke: blue;
    stroke-width: 1;
    fill: transparent;
}

HTML:

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title> CREATION FAC</title>
        <link rel="stylesheet" href="191_STYLE.css"/>        
    </head>
  
    <body>
        <h1>CREATION D'UNE FICHE DE CONTROLE</h1>  
        <button id="coteLin">AJOUTER 1 COTE LINEAIRE</button>
        <button id="coteGeo">AJOUTER 1 COTE GEOMETRIQUE</button>
        <br>
        <div id="id_fac" class="class_fac">
            <p>FICHE AUTO CONTROLE</p>
        </div>
        <script id="script_JS1" src = "191_creaFAC.js"></script>
        <script id="script_JS2" src="191_graphe.js"></script>
    </body>
</html>