SVG脉冲动画无法识别类

时间：2015-03-26 06:18:04

标签： svg svg-animate

我似乎无法使用插画家创建的心脏动画，以便使用脉冲动画进行缩放。不能为我的生活弄清楚出了什么问题。也许我在这里只是缺少一些简单的东西，因为我已经盯着这么久了。谢谢您的帮助。

＆＃13;
＆＃13; 
body {
  margin: 0;
  background-color: #d9d7be;
  text-align: center;
}

.heart{
  animation: pulse linear 1s infinite;
  -webkit-animation: pulse linear 1s infinite;
}

@keyframes pulse {
  0%{transform: scale (1);}
  30%{transform: scale (1);}
  40%{transform: scale (1.08);}
  50%{transform: scale (1);}
  60%{transform: scale (1);}
  70%{transform: scale (1.05);}
  80%{transform: scale (1);}
  100%{transform: scale (1);}
}

@-webkit-keyframes pulse {
  0%{-webkit-transform: scale (1);}
  30%{-webkit-transform: scale (1);}
  40%{-webkit-transform: scale (1.08);}
  50%{-webkit-transform: scale (1);}
  60%{-webkit-transform: scale (1);}
  70%{-webkit-transform: scale (1.05);}
  80%{-webkit-transform: scale (1);}
  100%{-webkit-transform: scale (1);}
}
＆＃13; 
<html>
<body>
  <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="597px" height="593px" viewBox="0 0 597 593" enable-background="new 0 0 597 593" xml:space="preserve">
    <g class="heart">
	  <path fill="#FF7175" d="M258.08,255.405c-0.898-7.654,0.082-16.847,6.735-20.737c8.806-5.149,19.895,3.531,23.278,13.154
		c3.316-9.961,12.405-18.064,22.851-19.111c10.447-1.047,21.467,5.766,24.211,15.9c2.152,7.952-0.72,16.59-5.632,23.206
		c-4.911,6.614-11.671,11.579-18.323,16.439c-7.933,5.795-15.865,11.59-23.795,17.384
		C281.945,295.363,259.763,269.744,258.08,255.405"/>
	  <path fill="#DADCDD" d="M320.746,276.922c3.236-2.739,6.25-5.704,8.776-9.105c0.044-0.06,0.089-0.119,0.132-0.179
		c-0.043,0.06-0.088,0.119-0.132,0.179C326.996,271.218,323.982,274.183,320.746,276.922 M257.797,250.701
		c0.001-6.215,1.593-12.537,6.559-15.751C259.39,238.164,257.798,244.486,257.797,250.701 M264.814,234.668
		c0.02-0.012,0.039-0.023,0.059-0.034C264.854,234.645,264.834,234.656,264.814,234.668 M264.881,234.629
		c1.255-0.723,2.554-1.166,3.872-1.367C267.436,233.464,266.135,233.907,264.881,234.629"/>
	  <path fill="#D7616B" d="M287.404,301.64c-0.006-0.006-0.011-0.012-0.016-0.019c-5.304-6.098-26.173-30.213-29.074-44.751
		c-0.1-0.5-0.178-0.989-0.234-1.465l0,0c-0.179-1.525-0.283-3.111-0.283-4.704c0.001-6.215,1.593-12.537,6.559-15.751
		c0.15-0.097,0.303-0.191,0.459-0.282l0,0c0.02-0.012,0.039-0.023,0.059-0.034c0.002-0.002,0.005-0.003,0.007-0.005
		c1.254-0.722,2.555-1.165,3.872-1.367c0.565-0.086,1.134-0.128,1.703-0.128c5.753,0,11.591,4.258,15.168,9.742
		c-1.132,9.498-7.344,20.871-3.758,28.043c0.76,1.139,1.682,1.624,2.729,1.624c5.031-0.002,12.926-11.2,19.312-14.849
		c3.27-1.961,6.828-2.855,10.305-2.855c7.234,0,14.109,3.873,17.255,10.062c-0.565,0.942-1.168,1.858-1.812,2.737
		c-0.043,0.06-0.088,0.119-0.132,0.179c-2.526,3.401-5.54,6.366-8.776,9.105c-3.059,2.587-6.315,4.973-9.547,7.334
		C303.267,290.051,295.334,295.845,287.404,301.64L287.404,301.64"/>
    </g>
  </svg>

</body> 
</html>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

<animateTransform attributeName="transform" begin="0s" dur="1s" type="scale" from="1" to="2" repeatCount="indefinite" />

和

<animateTransform attributeName="transform" begin="0s" dur="20s" type="transalte" from="0 0" to="-250 -250" repeatCount="indefinite" />

应该可以帮助你帮助你。

您需要创建另一个翻译的图层g，然后您可以缩放内部g。所以你的心仍然居于中心。

如果要创建链式动画，可以抛弃from和to并将其替换为values="x;y;z"，其中分号表示另一个关键帧。

<body>
    <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="597px" height="593px" viewBox="0 0 597 593" enable-background="new 0 0 597 593" xml:space="preserve">
        <g>
            <animateTransform attributeName="transform" begin="0s" dur="1s" type="translate" values="0 0; -250 -250; 0 0" repeatCount="indefinite" />
            <g>
                <animateTransform attributeName="transform" begin="0s" dur="1s" type="scale" values="1; 2; 1" repeatCount="indefinite" />
                <path fill="#FF7175" d="M258.08,255.405c-0.898-7.654,0.082-16.847,6.735-20.737c8.806-5.149,19.895,3.531,23.278,13.154
        c3.316-9.961,12.405-18.064,22.851-19.111c10.447-1.047,21.467,5.766,24.211,15.9c2.152,7.952-0.72,16.59-5.632,23.206
        c-4.911,6.614-11.671,11.579-18.323,16.439c-7.933,5.795-15.865,11.59-23.795,17.384
        C281.945,295.363,259.763,269.744,258.08,255.405" />
                <path fill="#DADCDD" d="M320.746,276.922c3.236-2.739,6.25-5.704,8.776-9.105c0.044-0.06,0.089-0.119,0.132-0.179
        c-0.043,0.06-0.088,0.119-0.132,0.179C326.996,271.218,323.982,274.183,320.746,276.922 M257.797,250.701
        c0.001-6.215,1.593-12.537,6.559-15.751C259.39,238.164,257.798,244.486,257.797,250.701 M264.814,234.668
        c0.02-0.012,0.039-0.023,0.059-0.034C264.854,234.645,264.834,234.656,264.814,234.668 M264.881,234.629
        c1.255-0.723,2.554-1.166,3.872-1.367C267.436,233.464,266.135,233.907,264.881,234.629" />
                <path fill="#D7616B" d="M287.404,301.64c-0.006-0.006-0.011-0.012-0.016-0.019c-5.304-6.098-26.173-30.213-29.074-44.751
        c-0.1-0.5-0.178-0.989-0.234-1.465l0,0c-0.179-1.525-0.283-3.111-0.283-4.704c0.001-6.215,1.593-12.537,6.559-15.751
        c0.15-0.097,0.303-0.191,0.459-0.282l0,0c0.02-0.012,0.039-0.023,0.059-0.034c0.002-0.002,0.005-0.003,0.007-0.005
        c1.254-0.722,2.555-1.165,3.872-1.367c0.565-0.086,1.134-0.128,1.703-0.128c5.753,0,11.591,4.258,15.168,9.742
        c-1.132,9.498-7.344,20.871-3.758,28.043c0.76,1.139,1.682,1.624,2.729,1.624c5.031-0.002,12.926-11.2,19.312-14.849
        c3.27-1.961,6.828-2.855,10.305-2.855c7.234,0,14.109,3.873,17.255,10.062c-0.565,0.942-1.168,1.858-1.812,2.737
        c-0.043,0.06-0.088,0.119-0.132,0.179c-2.526,3.401-5.54,6.366-8.776,9.105c-3.059,2.587-6.315,4.973-9.547,7.334
        C303.267,290.051,295.334,295.845,287.404,301.64L287.404,301.64" />
            </g>
        </g>
    </svg>
</body>

答案 1 :(得分：1)

在比例和（

）之间不能有空格

如果您希望心脏从中心而不是从左上方缩放，您可能希望确保路径位于原点的中心。或者尝试使用transform-origin但是如果你希望它在Firefox中工作，请注意不要使用带有transform-origin的百分比单位。

body {
  margin: 0;
  background-color: #d9d7be;
  text-align: center;
}

.heart{
  animation: pulse linear 1s infinite;
  -webkit-animation: pulse linear 1s infinite;
}

@keyframes pulse {
  0%{transform: scale(1);}
  30%{transform: scale(1);}
  40%{transform: scale(1.08);}
  50%{transform: scale(1);}
  60%{transform: scale(1);}
  70%{transform: scale(1.05);}
  80%{transform: scale(1);}
  100%{transform: scale(1);}
}

@-webkit-keyframes pulse {
  0%{-webkit-transform: scale(1);}
  30%{-webkit-transform: scale(1);}
  40%{-webkit-transform: scale(1.08);}
  50%{-webkit-transform: scale(1);}
  60%{-webkit-transform: scale(1);}
  70%{-webkit-transform: scale(1.05);}
  80%{-webkit-transform: scale(1);}
  100%{-webkit-transform: scale(1);}
}
<html>
<body>
  <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="597px" height="593px" viewBox="0 0 597 593" enable-background="new 0 0 597 593" xml:space="preserve">
    <g class="heart">
	  <path fill="#FF7175" d="M258.08,255.405c-0.898-7.654,0.082-16.847,6.735-20.737c8.806-5.149,19.895,3.531,23.278,13.154
		c3.316-9.961,12.405-18.064,22.851-19.111c10.447-1.047,21.467,5.766,24.211,15.9c2.152,7.952-0.72,16.59-5.632,23.206
		c-4.911,6.614-11.671,11.579-18.323,16.439c-7.933,5.795-15.865,11.59-23.795,17.384
		C281.945,295.363,259.763,269.744,258.08,255.405"/>
	  <path fill="#DADCDD" d="M320.746,276.922c3.236-2.739,6.25-5.704,8.776-9.105c0.044-0.06,0.089-0.119,0.132-0.179
		c-0.043,0.06-0.088,0.119-0.132,0.179C326.996,271.218,323.982,274.183,320.746,276.922 M257.797,250.701
		c0.001-6.215,1.593-12.537,6.559-15.751C259.39,238.164,257.798,244.486,257.797,250.701 M264.814,234.668
		c0.02-0.012,0.039-0.023,0.059-0.034C264.854,234.645,264.834,234.656,264.814,234.668 M264.881,234.629
		c1.255-0.723,2.554-1.166,3.872-1.367C267.436,233.464,266.135,233.907,264.881,234.629"/>
	  <path fill="#D7616B" d="M287.404,301.64c-0.006-0.006-0.011-0.012-0.016-0.019c-5.304-6.098-26.173-30.213-29.074-44.751
		c-0.1-0.5-0.178-0.989-0.234-1.465l0,0c-0.179-1.525-0.283-3.111-0.283-4.704c0.001-6.215,1.593-12.537,6.559-15.751
		c0.15-0.097,0.303-0.191,0.459-0.282l0,0c0.02-0.012,0.039-0.023,0.059-0.034c0.002-0.002,0.005-0.003,0.007-0.005
		c1.254-0.722,2.555-1.165,3.872-1.367c0.565-0.086,1.134-0.128,1.703-0.128c5.753,0,11.591,4.258,15.168,9.742
		c-1.132,9.498-7.344,20.871-3.758,28.043c0.76,1.139,1.682,1.624,2.729,1.624c5.031-0.002,12.926-11.2,19.312-14.849
		c3.27-1.961,6.828-2.855,10.305-2.855c7.234,0,14.109,3.873,17.255,10.062c-0.565,0.942-1.168,1.858-1.812,2.737
		c-0.043,0.06-0.088,0.119-0.132,0.179c-2.526,3.401-5.54,6.366-8.776,9.105c-3.059,2.587-6.315,4.973-9.547,7.334
		C303.267,290.051,295.334,295.845,287.404,301.64L287.404,301.64"/>
    </g>
  </svg>

</body> 
</html>

相关问题
最新问题