# create line to svg

# create line to svg

by jihoon kim

HTML

<svg height="400" width="500">
<!--

  <line x1="0" y1="0" x2="1000" y2="0" style="stroke:rgb(255,0,0);stroke-width:2" />
  Sorry, your browser does not support inline SVG.
-->    
</svg>
<script>
function createLine(svg,x1,y1,x2,y2,color,thick) {
    var l = document.createElementNS('http://www.w3.org/2000/svg','line');

    l.setAttribute("x1",x1);
    l.setAttribute("y1",y1);    
    l.setAttribute("x2",x2);    
    l.setAttribute("y2",y2);        
    l.style ="stroke:" + color + ";stroke-width:" + thick;
    console.info(l);
    svg.appendChild(l);
		console.info(svg);
}

/*  */
createLine(document.querySelector("svg"),0,0,500,0,"#ff0000",2);
createLine(document.querySelector("svg"),0,0,0,200,"#00ff00",4);
createLine(document.querySelector("svg"),500,0,500,200,"#0000ff",6);
createLine(document.querySelector("svg"),0,200,1000,200,"#f0f000",8);

</script>