How to keep the element's bounding box in place after being transformed?

Question

Bit of a weird one, but I have an element, that has 2 pseudo elements, we'll call them front/back.

I am using CSS to transform the element's container, which rotates it x-degrees, from the left center. I am then rotating the back pseudo back to 0. This works exactly how I want it to, but now I'm having trouble where I'm trying to use SVG to draw a line between two points in the element (green dots in image).

When the angle is 0, it works perfectly, as the bounding box hasn't changed. But once there is a transform, the left/top positioning is still based off the bounding box, despite the elements being rotated back.

Is there a way to visually rotate this, while keeping the bounding box at it's origin?

The general layout looks like this:

<div class="myEl">
  ::before
  ::after
  <svg>
    <line x1="194" y1="37" x2="434" y2="35" stroke="black" stroke-width="2"></line>
   </svg>
</div>

and I am setting the line like so:

const drawStemBodyLine = (el, points) => {
      const svg = el.querySelector('svg');
      const line = document.createElementNS("http://www.w3.org/2000/svg", "line");
      const x1 = points[0].offsetLeft + points[0].offsetWidth / 2;
      const y1 = points[0].offsetTop + points[0].offsetHeight / 2;
      const x2 = points[1].offsetLeft + points[1].offsetWidth / 2;
      const y2 = points[1].offsetTop + points[1].offsetHeight / 2;

      line.setAttribute('x1', x1);
      line.setAttribute('y1', y1);
      line.setAttribute('x2', x2);
      line.setAttribute('y2', y2);
      line.setAttribute("stroke", "black");
      line.setAttribute("stroke-width", "2");

      el.appendChild(line)
    }

Example 0 degree

Example 10 degree (with box highlight)