Animazione scala SVG dal punto centrale anziché dall'angolo superiore sinistro

Question

Come utilizzare animateTransform in un SVG per ridimensionare un oggetto dal punto centrale anziché dall'angolo superiore sinistro?

Esempio:

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

Answer 1

Cambia la tua ridimensionamento trasformare da usare additive="sum" e applicare un ulteriore trasformazione che traduce il cerchio al centro dell'immagine. Quindi, invece di definire la forma al centro dell'immagine, definisci il suo centro come 0 0 e poi usa l'attributo transform per tradurlo in 50, 50 (il centro esatto della tua immagine particolare).

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

Ecco un altro esempio utilizzando i defs e use tag di riutilizzare la definizione cerchio:

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