SVG 脉冲动画无法识别 Class
SVG Pulse Animation Not Recognizing Class
我似乎无法为我在 Illustrator 中创建的一颗心设置动画以使用脉冲动画进行缩放。不能为我的生活弄清楚什么是错的。也许我只是在这里遗漏了一些简单的东西，因为我已经盯着它看了这么久。谢谢您的帮助。
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>
<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>
比例和 (
之间不能有 space
如果您希望心脏从其中心而不是从左上角开始缩放，您可能需要确保您的路径以原点为中心。或者尝试 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>
我似乎无法为我在 Illustrator 中创建的一颗心设置动画以使用脉冲动画进行缩放。不能为我的生活弄清楚什么是错的。也许我只是在这里遗漏了一些简单的东西，因为我已经盯着它看了这么久。谢谢您的帮助。
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>
<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>
比例和 (
之间不能有 space如果您希望心脏从其中心而不是从左上角开始缩放，您可能需要确保您的路径以原点为中心。或者尝试 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>