Transform: scale() changes relative parent

Question

I'm trying to implement zooming using transform: scale(). The structure looks something like that:

<div class="nodes">
    <div class="main-wrapper">
       <-- svg lines are here -->
    </div>
</div>

Where nodes has position set to relative.

The problem is when I apply transform: scale() to main-wrapper, the offsetParent of svg lines drawn inside of main-wrapper changes to main-wrapper instead of nodes. I need it to be relative to nodes in order to draw it correctly.

How can I force it to be always relative to nodes?

I tried setting main-wrapper's position to static after transform but it did not help.

//Edit

Here's a simplified example

.main-wrapper {
  display: flex;
  align-items: center;
  transition: transform .5s;
  transform-origin: 0 0;
  transform: scale(1);
  background: green;
  width: 100px;
  height: 100px;
}

.empty {
  background: blue;
  height: 60px;
  width: 100%;
}

.nodes {
  position: relative;
  width: 200px;
  height: 200px;
  background: yellow;
}

svg{
  position:absolute;
 top:25px;
}

.main-wrapper-no-trans {
  display: flex;
  align-items: center;
  background: green;
  width: 100px;
  height: 100px;
}

.nodes-no-trans {
  position: relative;
  width: 200px;
  height: 200px;
  background: yellow;
}

<div class="nodes-no-trans">
  <div class="empty"></div>
 <div class="main-wrapper-no-trans">
      <svg> 
       <line x1="0" y1="0" x2="100" y2="0/" stroke="red" stroke-width="4"></line> 
      </svg>
   </div>
</div>

<br><br><br>

<div class="nodes">
  <div class="empty"></div>
 <div class="main-wrapper">
      <svg> 
       <line x1="0" y1="0" x2="100" y2="0/" stroke="red" stroke-width="4"></line> 
      </svg>
   </div>
</div>