How can I make a <rect> in SVG expand its width using animateTransform based on a specified value? Additionally, I want the color of the <rect> to change according to the following conditions:
- If the
<rect>value is between 0 and 29:{fill:red;} - If the
<rect>value is between 30 and 49:{fill:blue;} - If the
<rect>value is between 50 and 100:{fill:green;}
This is the SVG code snippet
<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>