CODEWITHSUNDEEP
htmlsvg
ramon22
ramon22

Reputation: 3628

SVG image at page load animation does not start from initial position

I made this Avatar image with SVG and added animation to it, the circle clips the man path but at page load it shows the path then it jumps to animation. How do I keep it so that it would not show the path until animation begins

<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>

Upvotes: 0

Views: 74

Answers (1)

Robert Longson
Robert Longson

Reputation: 124299

Set the opacity of the object to 0 at the start in markup and then move the animations so they are children of the element itself rather than animating the parent <g> element. That way the animation has sufficient specificity to override the element's properties.

<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>

Upvotes: 2

Related Questions