HTML SVG Tag

Örnek
Şöyle yaparız.

<svg id="svg" height="100%" width="100%">
  <polyline id="polyline" style="fill:white;stroke:black;stroke-width:1"/>
  <line id="templine" style="fill:white;stroke:black;stroke-width:1" />
</svg>

addEventListener metodu
Şöyle yaparız.

<script>
  let lastPt;
  const polyline = document.querySelector('#polyline');
  const svg = document.querySelector('#svg');
  const templine = document.querySelector('#templine');
  svg.addEventListener('click',(e) =>{
    let pts = polyline.getAttribute('points') || '';
    const newPoint = `${e.clientX},${e.clientY} `;
    pts += newPoint;
    polyline.setAttribute('points',pts); 
    lastPt = [e.clientX,e.clientY]
  })

  svg.addEventListener('mousemove',(e) =>{
    templine.setAttribute('x1',lastPt[0]);
    templine.setAttribute('y1',lastPt[1]);
    templine.setAttribute('x2',e.clientX);
    templine.setAttribute('y2',e.clientY);
  })

</script>