JSFiddle - React, Tailwind, and code Playground

HTML

<div id="line-container" style="transform: scale(0)">
  <svg id="line" xmlns="http://www.w3.org/2000/svg" version="1.1" class="staticContent shapesLine fill-transparent border-color8" height="100%" width="100%" preserveAspectRatio="none" viewBox="0 0 100 100">
  <g xmlns="http://www.w3.org/2000/svg" vector-effect="non-scaling-stroke"> 
    <line x1="0" y1="50" x2="100" y2="50" stroke="currentColor" stroke-width="3" vector-effect="non-scaling-stroke"/> 
    <rect x="0" y="30" width="100" height="40" style="fill: none !important; stroke: none !important; pointer-events:all !important" vector-effect="non-scaling-stroke"/>
  </g>
</svg>
</div>

JavaScript

$('#line-container').css('transform', 'scale(1)');
$('#line').css('transform', 'scale(1)');