Изображение SVG при анимации загрузки страницы не начинается с начальной позиции

Question

Я сделал это изображение Аватара с SVG и добавил к нему анимацию, круг обрезает путь человека, но при загрузке страницы он показывает путь, а затем переходит к анимации.Как сохранить так, чтобы он не показывал путь, пока не начнется анимация

<svg xmlns="http://www.w3.org/2000/svg" version="1" viewBox="25 70 160 160">
    <defs>
        <clipPath id="a">
            <circle cx="105" cy="149" r="69"></circle>
        </clipPath>
    </defs>
    <circle cx="105" cy="149" r="69" fill="#999" stroke="#848080" stroke-linecap="square" stroke-linejoin="round" stroke-width="3"></circle>
    <g clip-path="url(#a)">
        <g>
            <defs>
                <clipPath id="b">
                    <ellipse cx="105" cy="149" rx="68" ry="68"></ellipse>
                </clipPath>
            </defs>
            <path fill="#ccc" stroke="#e3e3e3" clip-path="url(#b)" stroke-linecap="square" stroke-linejoin="round" stroke-width="3" d="M137 137c0 18-14 32-31 32s-31-14-31-32 14-32 31-32 31 14 31 32zm-70 36c-13 0-17 12-17 24 0 13 4 21 17 21h76c13 0 17-9 17-21 0-13-4-24-17-24h-17a26 26 0 0 1-43 0z"></path>
            <animateTransform attributeName="transform" type="translate" from="0 120" to="0 0" begin="0s" dur="1.5s"></animateTransform>
            <animate attributeName="opacity" attributeType="XML" from="0" to="1" begin="0s" dur="1s"></animate>
        </g>
    </g>
</svg>

Answer 1

Установите непрозрачность объекта равной 0 в начале разметки, а затем переместите анимации, чтобы они были дочерними элементами самого элемента, а не анимировали родительский элемент <g>.Таким образом, анимация обладает достаточной специфичностью для переопределения свойств элемента.

<svg xmlns="http://www.w3.org/2000/svg" version="1" viewBox="25 70 160 160">
    <defs>
        <clipPath id="a">
            <circle cx="105" cy="149" r="69"></circle>
        </clipPath>
    </defs>
    <circle cx="105" cy="149" r="69" fill="#999" stroke="#848080" stroke-linecap="square" stroke-linejoin="round" stroke-width="3"></circle>
    <g clip-path="url(#a)">
        <g>
            <defs>
                <clipPath id="b">
                    <ellipse cx="105" cy="149" rx="68" ry="68"></ellipse>
                </clipPath>
            </defs>
            <path fill="#ccc" stroke="#e3e3e3" clip-path="url(#b)" stroke-linecap="square" stroke-linejoin="round" stroke-width="3" d="M137 137c0 18-14 32-31 32s-31-14-31-32 14-32 31-32 31 14 31 32zm-70 36c-13 0-17 12-17 24 0 13 4 21 17 21h76c13 0 17-9 17-21 0-13-4-24-17-24h-17a26 26 0 0 1-43 0z" opacity="0">
            <animateTransform attributeName="transform" type="translate" from="0 120" to="0 0" begin="0s" dur="1.5s"></animateTransform>
            <animate attributeName="opacity" from="0" to="1" begin="0s" dur="1s" fill="freeze"></animate>
            </path>
        </g>
    </g>
</svg>