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 viewBox="0 0 100 100">
      <line id="myLine" x1="25" y1="25" x2="75" y2="75" stroke="black" stroke-width="2" />
    </svg>
    <script>
      function getTransformedLineCoordinates(lineElement) {
        const x1 = lineElement.getAttribute("x1"),
          x2 = lineElement.getAttribute("x2"),
          y1 = lineElement.getAttribute("y1"),
          y2 = lineElement.getAttribute("y2");


        const ctm = lineElement.getScreenCTM();
        const p = new DOMPoint(x1, y1);
        const transformedPoint = p.createSVGPoint();
        transformedPoint.x = x1; // Replace with the original x coordinate of the line
        transformedPoint.y = y1; // Replace with the original y coordinate of the line
        const newCoordinates = transformedPoint.matrixTransform(ctm);
        console.log('Transformed coordinates:', newCoordinates.x, newCoordinates.y);

      }
      getTransformedLineCoordinates(document.getElementById('myLine'));

      // Get the SVG's coordinate system matrix

    </script>
  </body>

</html>