Estoy tratando de crear un elemento <line> y agregarlo a un elemento <g> . Cuando lo hago a través de HTML, funciona:

 <svg> <g id="graph-paper"> <line class="lineStyle" x1="0" y1="0" x2="100" y2="100"></line> </g> </svg> <style> .lineStyle { fill: none; shape-rendering: crispEdges; stroke: black; stroke-width: 1px; } </style>

Pero cuando trato de agregarlo con javascript, no lo hace:

 let graphPaper = document.getElementById("graph-paper") let line = document.createElement("line") line.setAttribute("x1", "0") line.setAttribute("x2", "20") line.setAttribute("y1", "40") line.setAttribute("y2", "80") line.setAttribute("class", "lineStyle") graphPaper.appendChild(line)

¿Qué estoy haciendo mal? Quiero hacerlo con javascript.