javascript - How to set the coordinate points dynamically in svg -

i trying create triangle using svg. did following tutorial. problem coordinates hardcoded. in canvas use getting width , height javascript.

in canvas

var width = document.getelementbyid('intro2').offsetwidth; var height=document.getelementbyid('intro2').offsetheight; var canvas = document.getelementbyid("intro2canvas"); canvas.width=width; canvas.height=height; if (canvas.getcontext) { var ctx = canvas.getcontext("2d"); ctx.strokestyle = "rgba(242,91,32,0.45)"; ctx.beginpath(); ctx.moveto(0,0); ctx.lineto(width/1.66,height); ctx.lineto(0,height); ctx.closepath(); ctx.fillstyle="rgba(242,91,32,0.45)"; ctx.fill(); 

how height , width value can use in svg ??

you can dynamically create , set width , height of svg follows:

function createsvg(){     svg = document.createelementns('http://www.w3.org/2000/svg', 'svg');     svg.setattribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');     svg.setattribute('version', '1.1');     svg.setattribute('id', 'id'); //id reffering svg     var canvas = document.getelementbyid('id'); //id of container element     width = canvas.getboundingclientrect().width;     height = canvas.getboundingclientrect().height;             svg.setattribute('height', height);             svg.setattribute('width', width);             canvas.appendchild(svg);             //return svg; } 

for adding polygons dynamically can use function like

function drawpoly(points, fill, stroke) {      var poly = document.createelementns("http://www.w3.org/2000/svg","polygon");     poly.setattribute("points", points);     poly.setattribute("stroke", stroke);     poly.setattribute('fill', fill);      svg.appendchild(poly); //where svg referring svg element              // return poly; } 

afterwards can create polygon in tutorial dynamically like

drawpoly("10,0  60,0  35,50","#cc3333","#660000"); 

update: fiddle

update: fiddle auto resize