svg animation : using g transform attribute

<svg viewBox="0 0 500 500">
    <title>we are the world.</title>
    <desc>we are the world....we are the world.!</desc>
    <defs></defs>
    <g id="g1" transform="translate(10,10)">
        <rect x="10" y="10" width="100" height="100" fill="gold" stroke="blue">
            <animate attributeName="rx" values="0;50;0" begin="0" dur="3s" repeatCount="indefinite"/>
        </rect>
        <circle cx="60" cy="60" r="5" fill="red" stroke="none"/>
    </g>
    <g id="g2" transform="translate(200,10)">
        <rect x="10" y="10" width="100" height="100" fill="skyblue" stroke="blue">
            <animate attributeName="rx" values="0;50;0" begin="0" dur="3s" repeatCount="indefinite"/>
        </rect>
        <circle cx="60" cy="60" r="5" fill="red" stroke="none"/>
    </g>
    <g id="g3" transform="translate(50,150)">
        <g fill="grey" transform="rotate(-10 50 100)
               translate(-36 45.5)
               skewX(40)
               scale(1 0.5)">
            <path id="heart" d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z"/>
            <title>heart!</title>
        </g>
        <use href="#heart" fill="none" stroke="red"/>
        <animateTransform id="anim1" attributeName="transform" type="skewX" values="0;10;0;-10;0" begin="0" dur="3s" additive="sum" fill="freeze" repeatCount="indefinite"/>
    </g>
    <g id="g4" transform="translate(250,150)">
        <g fill="grey" transform="rotate(10 50 100)
               translate(36 45.5)
               skewX(-40)
               scale(1 0.5)">
            <path id="heart" d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z"/>
            <title>heart2!</title>
        </g>
        <use href="#heart" fill="none" stroke="red"/>
        <animateTransform id="anim1" attributeName="transform" type="skewX" values="0;-10;0;10;0" begin="0" dur="3s" additive="sum" fill="freeze" repeatCount="indefinite"/>
    </g>
</svg>