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.
>Solution :
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>