Animacja skali SVG z punktu środkowego zamiast z lewego górnego rogu

Question

Jak użyć wartości animateTransform w obrazie SVG, aby przeskalować obiekt z punktu środkowego zamiast z lewego górnego rogu?

Przykład:

<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

Zmień swoją skalowanie przekształcić w użyciu additive="sum" i zastosować dodatkowy przekształcić przekształcającym kręgu na środku obrazu. Dlatego zamiast definiować kształt w środku obrazu, zdefiniuj jego środek, aby był 0 0, a następnie użyj atrybutu transform, aby przetłumaczyć go na 50, 50 (dokładne centrum twojego określonego obrazu).

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

Oto kolejny przykład stosując defs i use tagów ponowne wykorzystanie definicji okręgu:

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