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>

沿着路径原点的“脉冲”动画是期望的。我试过在最后一组之间放弃这个，但是有一些问题。首先，它没有动画回原始尺度。

<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中不起作用（或者至少它不会沿着真正的原点动画。）

请参阅小提琴：http://jsfiddle.net/y1kdna46/3/

从阅读开始，似乎有一个变换矩阵可用于跨浏览器。任何提示/建议？尽我所能，我希望避免CSS / javascript执行此操作。即在SVG的代码中完成所有操作。

Answer 1

这似乎是正确的。我已经对路径进行了变换，因此它会根据原点进行缩放，然后使用值进行缩放，然后撤消缩放。还要注意添加剂=＆＃34;总和＆＃34;所以我不会覆盖我的初始变换。

＆＃13;

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
	 width="112.5px" height="115.4px" viewBox="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 transform="translate(50, 50)">
			<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
				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"/>
				<animateTransform attributeType="XML"
        attributeName="transform" type="scale"
            values="1;1.5;1" additive="sum"
        begin="0s" dur="2s" repeatCount="indefinite"/>
		</g>


</svg>

＆＃13;

简单的SVG缩放路径

1 个答案: