SVG animateTransform not supporting translate percentage-CodePudding

I have the following SVG animation of a progress bar, where it indefinitely fills from left to right and then "shrinks" at the same path. I have accomplished the desired effect by transforming the rectangle's position with the following code:

    <svg width="500px" height="5px" style="background: #f5f5f5">
        <rect x="0" y="0" width="100%" height="100%" style="fill: black;" >
            <animateTransform id="fill" attributeName="transform" type="translate" from="-500 1" to="0 1" begin="0s;retract.end" dur="1s" calcMode="spline" keyTimes="0;1" keySplines=".5 0 .5 1" />
            <animateTransform id="retract" attributeName="transform" type="translate" from="0 1" to="500 1" begin="fill.end" dur="1s" calcMode="spline" keyTimes="0;1" keySplines=".5 0 .5 1"/>
        </rect>        
    </svg>

Although, the problem is that the SVG element width is fixed and so are the values for transformation. I had wanted to use -100% and 100% values respectively, but I found an information that currently animateTransform translate does not accept percentage values. It simply does not work.

How can I make it responsive, so that svg element's width is 100% (e.g. occupying the whole width of a flexbox), yet the rect animation is filling it out accordingly, when transformed?

Thank you.

CodePudding user response：

If you use a viewBox the rect no longer needs to be in percentages at all and then the animation just works.

    <svg width="500px" height="5px" viewBox="0 0 100 100" preserveAspectRatio="none" style="background: #f5f5f5">
        <rect x="0" y="0" width="100" height="100" style="fill: black;" >
            <animateTransform id="fill" attributeName="transform" type="translate" from="-500 1" to="0 1" begin="0s;retract.end" dur="1s" calcMode="spline" keyTimes="0;1" keySplines=".5 0 .5 1" />
            <animateTransform id="retract" attributeName="transform" type="translate" from="0 1" to="500 1" begin="fill.end" dur="1s" calcMode="spline" keyTimes="0;1" keySplines=".5 0 .5 1"/>
        </rect>        
    </svg>