SVG How do increase width using animateTransform? : I have a <rect> that need to expand its WIDTH using animateTransform based on a given value, the <rect> should change colors as follows

 - if <rect> value is 0 - 29  <rect>'s {fill:red;}
 - if <rect> value is 30-49 <rect>'s {fill:blue;}
 - if <rect> value is 50 - 100 <rect>'s {fill:green;}

I hope that i have well communicated,
Thank you very much for your help!

**Here is my .svg**

    <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 613 656">
    <defs>
        <style>.cls-1,.cls-4{fill:red;}.cls-2,.cls-5{fill:#29abe2;}.cls-3,.cls-6{fill:#22b573;}.cls-4,.cls-5,.cls-6{font-size:48px;font-family:MyriadPro-Regular, Myriad Pro;}</style>
    </defs>
    <title>Stackoverflow</title>
    <rect class="cls-1" x="45.5" y="67.5" width="104" height="104" />
    <rect class="cls-2" x="46" y="198" width="229" height="104" />
    <rect class="cls-3" x="46" y="340" width="395" height="104" />
    <rect class="cls-3" x="46" y="486" width="544" height="104">

	<animateTransform attributeName="transform"
                            type="translate"
                            from="0 0"
                            to="150 0"
                            begin="0s"
                            dur="2s"
                            repeatCount="indefinite"
                          />


	</rect>
    <text class="cls-4" transform="translate(190.86 128.57)">initial</text>
    <text class="cls-5" transform="translate(317.86 258.57)">30 - 49%</text>
    <text class="cls-6" transform="translate(455.86 408.57)"50 - 100%</text>
    <text class="cls-4" transform="translate(317.86 125.57)">0 - 29%</text>
</svg>