SVG Animation d'Échelle à partir du Point central au lieu de le Coin Supérieur Gauche

Comment puis-je utiliser animateTransform dans une SVG à l'échelle d'un objet à partir du point central au lieu de le coin supérieur gauche?

Exemple:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100px" height="100px">
    <circle style="fill:blue;" cx="50" cy="50" r="45">
        <animateTransform attributeName="transform"
             type="scale"
             from="0 0"
             to="1 1"
             begin="0s"
             dur="1s"
             repeatCount="indefinite"
        />
    </circle>
</svg>

(Codepen: http://codepen.io/anon/pen/wKwrPg?editors=100)

SVG Animation d'Échelle à partir du Point central au lieu de le Coin Supérieur Gauche

OriginalL'auteur MattSidor | 2015-08-27

  1. 10

    Modifier votre mise à l'échelle de transformation à utiliser additive="sum" et d'appliquer un supplément de transformation qui se traduit par le cercle au centre de l'image. Ainsi, au lieu de définir la forme au centre de l'image, de définir son centre de 0 0 et ensuite utiliser le transform attribut pour le traduire pour 50, 50 (le centre exact de votre image).

    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100px" height="100px">
    <circle style="fill:blue;" cx="0" cy="0" r="45" transform="translate(50 50)">
        <animateTransform attributeName="transform"
             type="scale"
             additive="sum" 
             from="0 0"
             to="1 1"
             begin="0s"
             dur="1s"
             repeatCount="indefinite"
        />
    </circle>
</svg>

    Voici un autre exemple d'utilisation de la defs et use balises de réutiliser le cercle définition:

    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100px" height="100px">
    <defs>
        <circle id="def-circle" style="fill:blue;" cx="0" cy="0" r="45" />
    </defs>

    <use xlink:href="#def-circle" transform="translate(50 50)">
        <animateTransform attributeName="transform" 
        type="scale"
        additive="sum"    
        from="0 0"
        to="1 1"      
        beg="0s"
        dur="1s"
        repeatCount="indefinite" />
    </use>   
</svg>
    Merci beaucoup!! Si simple.

    OriginalL'auteur trooper