The following animated svg shows a point that is translated from left to right:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="432px" height="574px" viewBox="0 0 432 574">
<path d="M217.074,165.651c-36.607,0-66.268,29.589-66.268,66.307c0,36.597,29.66,66.274,66.268,66.274c36.642,0,66.367-29.678,66.367-66.274C283.441,195.241,253.716,165.651,217.074,165.651" fill="#CC0000">
<animateTransform attributeName="transform" type="translate" from="0" to="90" dur="0.01s" fill="freeze"/>
</path>
</svg>
I need to save the svg in the form it looks like at the end of the animation as png/jpg. My current approach is to set a very short duration for the animation, stop it in the end using fill="freeze" and then take an automated screenshot in Chrome using Javascript. However, one screenshot takes around 0.3 seconds and I need to do it for thousands of svg's so I need to accelerate this. Is there another way to achieve that? Thank you!
There does not seem to be a way to achieve this. My workaround in the end was to write a function that interpolates the animateTransform statements, inserts them into the SVG code, and stores one SVG per interpolation step. The drawback is that this only works for animateTransform statements.