How to prevent SVG scale animation resetting on finish

Question

I have multiple SVGs displayed on my website, which are animated using the animateTransform element triggered by beginElement(). The first few scale animations I created finished on a scale of 100% so I didn't notice anything strange happening. However, I've now created a simple scale animation of a circle object which scales it from 100% to 150% and when the animation has finished the scale returns to 100%. I also changed the final scale value of an SVG scale animation that previously ended on 100% and realised for the first time that it also returns to a scale of 100% on finishing.

onclick="nextImage()" attribute on the element used as a control triggers this JS function:

function nextImage() {
    document.getElementById('navCircle1').firstElementChild.firstElementChild.beginElement();
}

and the full SVG as used in HTML:

<svg
    width="16"
    height="16"
    viewBox="0 0 8.4666665 8.4666666"
    version="1.1"
    id="navCircle1"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:svg="http://www.w3.org/2000/svg">
    <g>
        <animateTransform
            attributeName="transform"
            attributeType="XML"
            type="scale"
            calcMode="linear"
            values="1 1;1.5 1.5"
            keyTimes="0;1"
            dur="0.1s"
            repeatCount="1"
            restart="always"
            begin="indefinite"/>
        <circle
           style="stroke-width:1;stroke-linecap:round;stroke:none"
           id="path358"
           cx="4.2333331"
           cy="4.2333331"
           r="3" />
    </g>
</svg>

The animation itself works perfectly before resetting.

I have tried using animation-fill-mode: forwards to style ALL elements you see in the SVG code, but it doesn't change anything.

Is this just default behaviour based on the lack of an attribute specified in the animateTransform element? If so I've been searching for hours now and cannot for the life of me figure out what attribute needs specifying.

Answer 1

So the solution is to include fill="freeze" attribute in the animateTransform element.

Thanks @enxaneta for the answer.