title: How to set the coordinate points dynamically in svg
body: <p>I am trying to create a triangle using SVG. I did so by following the <a href="http://tutorials.jenkov.com/svg/polygon-element.html" rel="nofollow">tutorial</a>. But the problem is that the coordinates are hardcoded.
  In the canvas I use to do it by getting the width and height from javascript.</p>
  
  <p>in canvas</p>
  
  <pre><code>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();
  </code></pre>
  
  <p>How to get the height and width value so that I can use that in SVG ??</p>