SVG Scale Анимация из центральной точки вместо верхнего левого угла

Question

Как использоватьв SVG для масштабирования объекта из центральной точки вместо верхнего левого угла?

Пример:

<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

Меняйте масштабное преобразование использовать additive="sum" и применить дополнительное преобразование, которое переводит круг в центре изображения. Поэтому вместо определения формы в центре изображения определите ее центр как 0 0, а затем используйте атрибут transform, чтобы перевести его на 50, 50 (точный центр вашего конкретного изображения).

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

Вот еще один пример использования defs и use теги для повторного определения круга:

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