关于动画：路径的简单SVG缩放


Simple SVG scaling of a path

我当前具有以下SVG，并希望为路径设置动画：

1
2
3
4
5
6
7
8
9
10
11
12
13
<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>

沿路径的原点设置一个"脉冲"动画是所需要的。我尝试将其放在最后一组之间，但是存在一些问题。首先，它不会恢复原始比例的动画。

1
2
3
4
<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的代码中完成所有操作。

这似乎是正确的。我对路径进行了转换，以使其围绕原点缩放并使用值进行缩放，然后撤消缩放。另请注意additive =" sum"，这样我就不会覆盖我的初始转换。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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\tc-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\tc0.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>

相关讨论