SVG Ölçek Animasyonu, Üst Sol Köşe yerine Orta Noktadan

Question

Bir nesneyi, sol üst köşesi yerine orta noktadan ölçeklemek için bir SVG'de animateTransform'u nasıl kullanırım?

Örnek:

<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

sizin ölçekleme additive="sum" kullanmak ve ek bir o görüntünün merkezine daireyi çevirir dönüşümü uygulamak dönüşümü değiştirin. Görüntünün ortasındaki şekli tanımlamak yerine, merkezini 0 0 olarak tanımlayın ve(belirli görüntünüzün tam merkezini) olarak çevirmek için transform özniteliğini kullanın.

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

Burada daire tanımını yeniden defs ve use etiketlerini kullanarak başka bir örnek:

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