CSS desired transform-origin

Question

I am trying to use transform: scale on a group of svg rect element. It is scaling up but not from the transfrom-origin I wanted.

To elaborate, the code is following

.fw {
          animation: a2 2s linear 3 forwards;
          transform-origin: center bottom;
          
          }
   
@keyframes a2 {
        0% {
            transform: scale(0,0);
          }

        100% {
            transform: scale(1,1); 
          }
        } 

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="302" height="283">
  <title>Untitled-1</title>
   <g class="bcg">
    <rect x="0.5" y="0.5" width="301" height="282" fill="#ff5050"/>
    <path d="M693.5,152.67v281h-300v-281h300m1-1h-302v283h302v-283Z" transform="translate(-392.5 -151.67)" fill="#ff5050"/>
  </g>
   <g>
      <rect class="fw" x="25.5" y="100" width="5" height="83" fill="#fff"/>
      <rect class="fw" x="60.79" y="100" width="5" height="83" fill="#fff"/>
      <rect class="fw" x="96.07" y="100" width="5" height="83" fill="#fff"/>
      <rect class="fw" x="131.36" y="100" width="5" height="83" fill="#fff"/>
      <rect class="fw" x="166.64" y="100" width="5" height="83" fill="#fff"/>
      <rect class="fw" x="201.93" y="100" width="5" height="83" fill="#fff"/>
      <rect class="fw" x="237.21" y="100" width="5" height="83" fill="#fff"/>
      <rect class="fw" x="272.5" y="100" width="5" height="83" fill="#fff"/>
     </g>
</svg>

Now, the issue is I want fw to scale up from the center bottom of each of their own origin. However, CSS is calculating the transform-origin as the center bottom of class "bcg". I don't know what is the way around to this.

If someone can please help would be great.

Thank you in advance.