Простого масштабирования SVG в пути

Question

я в настоящее время имею следующий SVG, и хочу анимировать путь:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
width="112.5px" height="115.4px" viewBox="0 0 112.5 115.4" enable-background="new 0 0 112.5 115.4" xml:space="preserve"> 

    <g> 
     <ellipse fill="#333333" cx="56.3" cy="56.3" rx="56.3" ry="56.3"/> 
    </g> 

    <g> 
     <path fill="none" class="iphone-feature-icon-heart-path" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" d="M82.6,50L82.6,50c-0.2-8.1-6.9-15.2-15.1-15.2 
      c-4.8,0-9,2.4-11.8,6c-2.8-3.6-7-6-11.8-6c-8.3,0-15,7.2-15.1,15.2h0c0,0,0,0.1,0,0.1c0,0,0,0.1,0,0.1c0,0.2,0.1,0.4,0.1,0.6 
      c0.7,20.5,26.6,29,26.6,29s26.3-8.4,27.1-28.9c0-0.2,0.1-0.4,0.1-0.6c0,0,0-0.1,0-0.1C82.6,50.1,82.6,50.1,82.6,50z"/> 

    </g> 

A «импульс» анимировать по исходной точке пути является то, что желательно , Я попытался удалить это между последней группой, однако есть несколько проблем с этим. Прежде всего, он не оживает до первоначальной шкалы.

<animateTransform attributeType="XML" 
    attributeName="transform" type="scale" 
    from="1 1" to="1.5 1.5" 
    begin="0s" dur="2s" fill="freeze"/> 

Во-вторых, он не масштабируется вдоль центральной точки пути. Я подумал об использовании источника трансформации 50%, 50% и выполнения импульса в css, однако это не работает в firefox (или, по крайней мере, он не анимируется вдоль истинного начала.)

См. Fiddle: http://jsfiddle.net/y1kdna46/3/

От чтения вокруг есть матрица преобразования, которая может использоваться для этого кросс-браузера. Какие-нибудь советы/советы? Насколько я могу, я хочу избежать CSS/javascript, чтобы выполнить это. т. е. делать все это в коде SVG.

Answer 1

Это похоже на право. Я изменил путь, чтобы он масштабировал начало и используемые значения, а затем отменил масштабирование. Обратите внимание также на additive = "sum", поэтому я не перезаписываю свое первоначальное преобразование.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
 
\t width="112.5px" height="115.4px" viewBox="0 0 112.5 115.4" xml:space="preserve"> 
 

 
\t \t <g> 
 
\t \t \t <ellipse fill="#333333" cx="56.3" cy="56.3" rx="56.3" ry="56.3"/> 
 
\t \t </g> 
 

 
\t \t <g transform="translate(50, 50)"> 
 
\t \t \t <path transform="translate(-50, -50)" fill="none" class="iphone-feature-icon-heart-path" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" d="M82.6,50L82.6,50c-0.2-8.1-6.9-15.2-15.1-15.2 
 
\t \t \t \t c-4.8,0-9,2.4-11.8,6c-2.8-3.6-7-6-11.8-6c-8.3,0-15,7.2-15.1,15.2h0c0,0,0,0.1,0,0.1c0,0,0,0.1,0,0.1c0,0.2,0.1,0.4,0.1,0.6 
 
\t \t \t \t c0.7,20.5,26.6,29,26.6,29s26.3-8.4,27.1-28.9c0-0.2,0.1-0.4,0.1-0.6c0,0,0-0.1,0-0.1C82.6,50.1,82.6,50.1,82.6,50z"/> 
 
\t \t \t \t <animateTransform attributeType="XML" 
 
     attributeName="transform" type="scale" 
 
      values="1;1.5;1" additive="sum" 
 
     begin="0s" dur="2s" repeatCount="indefinite"/> 
 
\t \t </g> 
 

 

 
</svg>