JSFiddle - React, Tailwind, and code Playground

by Pankaj Kargirwar

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Transformed Line</title>
  </head>

  <body>
    <svg id="svg" width="200" height="200">
      <line id="line-ref" x1="50" y1="100" x2="150" y2="100" stroke="red" stroke-width="2" />
      <line id="line" x1="50" y1="110" x2="150" y2="110" stroke="black" stroke-width="2" />
    </svg>


    <script>
      // Get the line element
      const line = document.getElementById('line');
      //     line.setAttribute('transform', `translate(10, 10)`)
      line.setAttribute('transform', `scale(0.5)`);
      //line.setAttribute('transform', `scale(2)`);

      // Translate the line horizontally by 10 units
      const ctm = document.getElementById('line').getCTM();
      const x1 = line.getAttribute('x1');
      const x2 = line.getAttribute('x2');
      const y1 = line.getAttribute('y1');
      const y2 = line.getAttribute('y2');


      // Calculate the final coordinates of the line
      const finalX1 = x1 * ctm.a + y1 * ctm.c + ctm.e;
      const finalY1 = x1 * ctm.b + y1 * ctm.d + ctm.f;
      const finalX2 = x2 * ctm.a + y2 * ctm.c + ctm.e;
      const finalY2 = x2 * ctm.b + y2 * ctm.d + ctm.f;

      console.log(`New coordinates: (${finalX1}, ${finalY1}) to (${finalX2}, ${finalY2})`);

    </script>
  </body>

</html>