SVG形状动画——反转动画

SVG shape animation - reverse the animation

iam 目前正在测试 .svg 文件中的原生形状动画。 我现在已经设置了我的动画,但是使用 repeatCount = "indefinite" 会导致两个转换之间的跳跃。有没有办法改变形状,然后在再次开始之前重新调整那个变形?

这是我当前的动画,keyspline 标签只是为了测试:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="128px" height="128px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">

            <path d="M105.458,86.9005L106.907,89.0485L69.5305,108.142L68.7175,105.944C68.7175,105.944 67.1175,101.87 63.4175,99.5755C60.2075,97.4055 26.3605,73.8965 26.3725,63.8795C26.4455,58.7045 24.4185,55.3095 22.9445,52.8415C21.6675,50.8415 20.5625,48.9895 21.3645,46.9885C21.8875,45.4935 23.2425,44.4175 25.2845,43.9335C28.1085,43.2275 32.9545,43.8155 36.4125,47.0975C39.3425,49.7745 41.4705,54.4535 43.5855,58.9725C43.9665,59.7505 44.7165,61.1445 45.4035,61.7375C49.5855,66.0935 52.4095,65.3865 55.0445,62.2715C57.8255,58.9835 55.8715,40.2365 51.8785,38.2885C48.8905,36.9085 45.3925,37.1835 40.8265,36.0885C36.1015,35.0065 30.9125,34.1215 30.7885,28.4775C31.0635,25.8715 31.5985,24.5365 34.8365,22.9895C42.0825,19.5125 58.2515,17.5945 66.1585,24.5655C68.2185,26.3425 69.8845,27.1805 71.0025,29.1925C72.0655,28.4625 74.5205,27.1385 76.2695,27.0015C82.3125,26.5265 101.287,52.1735 101.459,52.3215C104.014,56.3205 102.56,72.4275 101.985,77.3195C101.773,80.7285 105.458,86.9005 105.458,86.9005M71.6205,102.162L100.529,87.2885C99.2145,84.8065 97.2835,80.5965 97.7875,76.8415C98.8175,67.5525 99.0725,56.5475 97.9665,54.6965C94.8725,49.9315 80.0505,32.3585 76.6105,31.3365C75.3385,31.4365 74.5945,32.1405 74.1425,32.4995C74.9295,34.3765 75.3995,36.2775 76.0025,37.8455C76.6565,40.0555 77.2855,41.9455 78.0475,43.5005C78.6125,44.5865 78.2365,45.9085 77.1615,46.4785C76.0865,47.0475 74.7765,46.6655 74.2105,45.5795C73.0925,43.5675 72.4395,41.3565 71.7725,38.9865C71.1445,37.0965 70.6625,35.0345 69.7155,33.1705C69.7155,33.1705 69.7025,33.0105 69.5435,33.0225C68.3875,30.5285 66.0105,28.7775 63.5945,26.5445C57.2445,21.0665 42.8255,22.8465 36.9725,25.7295C34.5035,26.8925 34.4585,28.3505 34.4835,28.6715C34.4635,30.4505 36.2755,31.1155 41.3315,32.3335C46.5455,33.5385 53.8345,32.6425 57.1765,38.5185C57.7295,39.4445 59.0625,44.1855 59.1885,45.7915C60.8725,59.0665 60.2335,63.1555 54.0175,67.5215C49.2395,69.8355 42.4555,66.9765 39.3805,60.4335C37.4625,56.3845 35.5195,52.0135 33.2755,49.9285C31.2035,47.9915 28.4495,47.5615 26.8595,47.6865C26.0645,47.7495 25.5995,47.9475 25.4535,48.1205C25.6505,48.5895 26.2035,49.5155 26.5845,50.2935C28.2425,53.0705 30.6505,57.2435 30.6655,63.5425C30.6105,70.9775 57.2035,89.7255 65.6465,95.3615C68.7105,97.7055 71.6205,102.162 71.6205,102.162" style="fill:black;fill-rule:nonzero;">
                
                <animate attributeName = "d" begin = "0s" dur = "2s"  calcMode = "spline" keySplines = "0 0.75 0.25 1" repeatCount   = "indefinite"
  from = "M105.458,86.9005L106.907,89.0485L69.5305,108.142L68.7175,105.944C68.7175,105.944 67.1175,101.87 63.4175,99.5755C60.2075,97.4055 26.3605,73.8965 26.3725,63.8795C26.4455,58.7045 24.4185,55.3095 22.9445,52.8415C21.6675,50.8415 20.5625,48.9895 21.3645,46.9885C21.8875,45.4935 23.2425,44.4175 25.2845,43.9335C28.1085,43.2275 32.9545,43.8155 36.4125,47.0975C39.3425,49.7745 41.4705,54.4535 43.5855,58.9725C43.9665,59.7505 44.7165,61.1445 45.4035,61.7375C49.5855,66.0935 52.4095,65.3865 55.0445,62.2715C57.8255,58.9835 55.8715,40.2365 51.8785,38.2885C48.8905,36.9085 45.3925,37.1835 40.8265,36.0885C36.1015,35.0065 30.9125,34.1215 30.7885,28.4775C31.0635,25.8715 31.5985,24.5365 34.8365,22.9895C42.0825,19.5125 58.2515,17.5945 66.1585,24.5655C68.2185,26.3425 69.8845,27.1805 71.0025,29.1925C72.0655,28.4625 74.5205,27.1385 76.2695,27.0015C82.3125,26.5265 101.287,52.1735 101.459,52.3215C104.014,56.3205 102.56,72.4275 101.985,77.3195C101.773,80.7285 105.458,86.9005 105.458,86.9005M71.6205,102.162L100.529,87.2885C99.2145,84.8065 97.2835,80.5965 97.7875,76.8415C98.8175,67.5525 99.0725,56.5475 97.9665,54.6965C94.8725,49.9315 80.0505,32.3585 76.6105,31.3365C75.3385,31.4365 74.5945,32.1405 74.1425,32.4995C74.9295,34.3765 75.3995,36.2775 76.0025,37.8455C76.6565,40.0555 77.2855,41.9455 78.0475,43.5005C78.6125,44.5865 78.2365,45.9085 77.1615,46.4785C76.0865,47.0475 74.7765,46.6655 74.2105,45.5795C73.0925,43.5675 72.4395,41.3565 71.7725,38.9865C71.1445,37.0965 70.6625,35.0345 69.7155,33.1705C69.7155,33.1705 69.7025,33.0105 69.5435,33.0225C68.3875,30.5285 66.0105,28.7775 63.5945,26.5445C57.2445,21.0665 42.8255,22.8465 36.9725,25.7295C34.5035,26.8925 34.4585,28.3505 34.4835,28.6715C34.4635,30.4505 36.2755,31.1155 41.3315,32.3335C46.5455,33.5385 53.8345,32.6425 57.1765,38.5185C57.7295,39.4445 59.0625,44.1855 59.1885,45.7915C60.8725,59.0665 60.2335,63.1555 54.0175,67.5215C49.2395,69.8355 42.4555,66.9765 39.3805,60.4335C37.4625,56.3845 35.5195,52.0135 33.2755,49.9285C31.2035,47.9915 28.4495,47.5615 26.8595,47.6865C26.0645,47.7495 25.5995,47.9475 25.4535,48.1205C25.6505,48.5895 26.2035,49.5155 26.5845,50.2935C28.2425,53.0705 30.6505,57.2435 30.6655,63.5425C30.6105,70.9775 57.2035,89.7255 65.6465,95.3615C68.7105,97.7055 71.6205,102.162 71.6205,102.162"
                         
  to = "M105.458,86.9005L106.907,89.0485L69.5305,108.142L68.7175,105.944C68.7175,105.944 67.1175,101.87 63.4175,99.5755C60.2075,97.4055 30.2115,77.2595 26.0385,68.1535C23.9425,63.4205 20.6835,61.1835 18.3125,59.5555C16.3175,58.2725 14.5395,57.0525 14.4325,54.8985C14.2825,53.3215 15.0645,51.7785 16.7175,50.4855C18.9885,48.6635 23.6375,47.1745 28.1495,48.7115C31.9305,49.9205 35.4985,52.9545 39.6335,56.2995C40.3045,56.8475 41.5705,57.5735 42.3385,58.2185C47.5465,61.3635 50.8705,64.5945 53.5055,61.4795C55.6495,57.0295 54.3325,36.5505 54.5245,31.4245C54.3265,26.6135 54.5475,16.3405 54.5505,11.6455C54.5055,6.79852 54.1595,1.54552 59.6205,0.113523C62.2195,-0.224477 64.4325,0.168523 66.6895,2.95852C69.2325,6.82052 72.3155,21.9045 72.9825,33.0295C73.1945,35.6185 70.5725,26.4335 71.6905,28.4455C72.7535,27.7165 74.5205,27.1385 76.2695,27.0015C82.3125,26.5265 101.287,52.1735 101.459,52.3215C104.013,56.3205 102.56,72.4275 101.985,77.3195C101.773,80.7285 105.458,86.9005 105.458,86.9005M71.6205,102.162L100.529,87.2885C99.2145,84.8065 97.2835,80.5965 97.7875,76.8415C98.8175,67.5525 99.0725,56.5475 97.9665,54.6965C94.8725,49.9315 80.0505,32.3585 76.6105,31.3365C75.3385,31.4365 74.5945,32.1405 74.1425,32.4995C74.9295,34.3765 75.3995,36.2775 76.0025,37.8455C76.6565,40.0555 77.2855,41.9455 78.0475,43.5005C78.6125,44.5865 78.2365,45.9085 77.1615,46.4785C76.0865,47.0475 74.7765,46.6655 74.2105,45.5795C73.0925,43.5675 72.4395,41.3565 71.7725,38.9865C71.1445,37.0965 70.6625,35.0345 69.7155,33.1705C69.7155,33.1705 70.3795,34.6835 69.4925,32.6435C68.3365,30.1495 69.5395,27.5035 69.1255,31.5725C66.8055,24.0815 65.8995,10.3625 63.7305,5.48952C62.0255,3.35852 60.5975,3.65352 60.2905,3.75252C58.5565,4.14652 58.3305,6.06352 58.3205,11.2635C58.3605,16.6155 58.8765,26.6195 59.1495,33.6745C59.2835,34.7445 59.4685,44.6965 59.5245,45.7375C59.2035,58.5935 61.3995,63.4245 53.8365,67.2375C48.3995,68.1745 41.9445,64.2495 36.4175,59.5885C32.9835,56.7105 29.3925,53.5515 26.4825,52.5945C23.7905,51.7005 21.1085,52.4605 19.7165,53.2375C19.0205,53.6265 18.6815,54.0005 18.6205,54.2195C18.9955,54.5635 19.8845,55.1735 20.5555,55.7205C23.2225,57.5515 27.1525,60.3365 29.7985,66.0535C32.8535,72.8315 57.2035,89.7255 65.6455,95.3615C68.7105,97.7055 71.6205,102.162 71.6205,102.162"/>
    </path>

</svg>

如有任何提示或提示,我们将不胜感激:)

不使用 fromto,而是使用 valueskeyTimes 属性。对于其中的每一个,您都指定一系列代表动画关键帧的值。

所以对于 values,我已经放置了 "[path1]; [path2]; [path1]",所以动画会转到 path2 并再次返回 path1。

keyTimes属性指定三个关键帧的时间。这些值表示从“0”到“1”的持续时间 (dur) 的分数。

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="128px" height="128px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">

            <path style="fill:black;fill-rule:nonzero;">
                
                <animate attributeName="d" begin="0s" dur="2s" repeatCount="indefinite" keyTimes="0; 0.5; 1"
  values = "M105.458,86.9005L106.907,89.0485L69.5305,108.142L68.7175,105.944C68.7175,105.944 67.1175,101.87 63.4175,99.5755C60.2075,97.4055 26.3605,73.8965 26.3725,63.8795C26.4455,58.7045 24.4185,55.3095 22.9445,52.8415C21.6675,50.8415 20.5625,48.9895 21.3645,46.9885C21.8875,45.4935 23.2425,44.4175 25.2845,43.9335C28.1085,43.2275 32.9545,43.8155 36.4125,47.0975C39.3425,49.7745 41.4705,54.4535 43.5855,58.9725C43.9665,59.7505 44.7165,61.1445 45.4035,61.7375C49.5855,66.0935 52.4095,65.3865 55.0445,62.2715C57.8255,58.9835 55.8715,40.2365 51.8785,38.2885C48.8905,36.9085 45.3925,37.1835 40.8265,36.0885C36.1015,35.0065 30.9125,34.1215 30.7885,28.4775C31.0635,25.8715 31.5985,24.5365 34.8365,22.9895C42.0825,19.5125 58.2515,17.5945 66.1585,24.5655C68.2185,26.3425 69.8845,27.1805 71.0025,29.1925C72.0655,28.4625 74.5205,27.1385 76.2695,27.0015C82.3125,26.5265 101.287,52.1735 101.459,52.3215C104.014,56.3205 102.56,72.4275 101.985,77.3195C101.773,80.7285 105.458,86.9005 105.458,86.9005M71.6205,102.162L100.529,87.2885C99.2145,84.8065 97.2835,80.5965 97.7875,76.8415C98.8175,67.5525 99.0725,56.5475 97.9665,54.6965C94.8725,49.9315 80.0505,32.3585 76.6105,31.3365C75.3385,31.4365 74.5945,32.1405 74.1425,32.4995C74.9295,34.3765 75.3995,36.2775 76.0025,37.8455C76.6565,40.0555 77.2855,41.9455 78.0475,43.5005C78.6125,44.5865 78.2365,45.9085 77.1615,46.4785C76.0865,47.0475 74.7765,46.6655 74.2105,45.5795C73.0925,43.5675 72.4395,41.3565 71.7725,38.9865C71.1445,37.0965 70.6625,35.0345 69.7155,33.1705C69.7155,33.1705 69.7025,33.0105 69.5435,33.0225C68.3875,30.5285 66.0105,28.7775 63.5945,26.5445C57.2445,21.0665 42.8255,22.8465 36.9725,25.7295C34.5035,26.8925 34.4585,28.3505 34.4835,28.6715C34.4635,30.4505 36.2755,31.1155 41.3315,32.3335C46.5455,33.5385 53.8345,32.6425 57.1765,38.5185C57.7295,39.4445 59.0625,44.1855 59.1885,45.7915C60.8725,59.0665 60.2335,63.1555 54.0175,67.5215C49.2395,69.8355 42.4555,66.9765 39.3805,60.4335C37.4625,56.3845 35.5195,52.0135 33.2755,49.9285C31.2035,47.9915 28.4495,47.5615 26.8595,47.6865C26.0645,47.7495 25.5995,47.9475 25.4535,48.1205C25.6505,48.5895 26.2035,49.5155 26.5845,50.2935C28.2425,53.0705 30.6505,57.2435 30.6655,63.5425C30.6105,70.9775 57.2035,89.7255 65.6465,95.3615C68.7105,97.7055 71.6205,102.162 71.6205,102.162;
                         
M105.458,86.9005L106.907,89.0485L69.5305,108.142L68.7175,105.944C68.7175,105.944 67.1175,101.87 63.4175,99.5755C60.2075,97.4055 30.2115,77.2595 26.0385,68.1535C23.9425,63.4205 20.6835,61.1835 18.3125,59.5555C16.3175,58.2725 14.5395,57.0525 14.4325,54.8985C14.2825,53.3215 15.0645,51.7785 16.7175,50.4855C18.9885,48.6635 23.6375,47.1745 28.1495,48.7115C31.9305,49.9205 35.4985,52.9545 39.6335,56.2995C40.3045,56.8475 41.5705,57.5735 42.3385,58.2185C47.5465,61.3635 50.8705,64.5945 53.5055,61.4795C55.6495,57.0295 54.3325,36.5505 54.5245,31.4245C54.3265,26.6135 54.5475,16.3405 54.5505,11.6455C54.5055,6.79852 54.1595,1.54552 59.6205,0.113523C62.2195,-0.224477 64.4325,0.168523 66.6895,2.95852C69.2325,6.82052 72.3155,21.9045 72.9825,33.0295C73.1945,35.6185 70.5725,26.4335 71.6905,28.4455C72.7535,27.7165 74.5205,27.1385 76.2695,27.0015C82.3125,26.5265 101.287,52.1735 101.459,52.3215C104.013,56.3205 102.56,72.4275 101.985,77.3195C101.773,80.7285 105.458,86.9005 105.458,86.9005M71.6205,102.162L100.529,87.2885C99.2145,84.8065 97.2835,80.5965 97.7875,76.8415C98.8175,67.5525 99.0725,56.5475 97.9665,54.6965C94.8725,49.9315 80.0505,32.3585 76.6105,31.3365C75.3385,31.4365 74.5945,32.1405 74.1425,32.4995C74.9295,34.3765 75.3995,36.2775 76.0025,37.8455C76.6565,40.0555 77.2855,41.9455 78.0475,43.5005C78.6125,44.5865 78.2365,45.9085 77.1615,46.4785C76.0865,47.0475 74.7765,46.6655 74.2105,45.5795C73.0925,43.5675 72.4395,41.3565 71.7725,38.9865C71.1445,37.0965 70.6625,35.0345 69.7155,33.1705C69.7155,33.1705 70.3795,34.6835 69.4925,32.6435C68.3365,30.1495 69.5395,27.5035 69.1255,31.5725C66.8055,24.0815 65.8995,10.3625 63.7305,5.48952C62.0255,3.35852 60.5975,3.65352 60.2905,3.75252C58.5565,4.14652 58.3305,6.06352 58.3205,11.2635C58.3605,16.6155 58.8765,26.6195 59.1495,33.6745C59.2835,34.7445 59.4685,44.6965 59.5245,45.7375C59.2035,58.5935 61.3995,63.4245 53.8365,67.2375C48.3995,68.1745 41.9445,64.2495 36.4175,59.5885C32.9835,56.7105 29.3925,53.5515 26.4825,52.5945C23.7905,51.7005 21.1085,52.4605 19.7165,53.2375C19.0205,53.6265 18.6815,54.0005 18.6205,54.2195C18.9955,54.5635 19.8845,55.1735 20.5555,55.7205C23.2225,57.5515 27.1525,60.3365 29.7985,66.0535C32.8535,72.8315 57.2035,89.7255 65.6455,95.3615C68.7105,97.7055 71.6205,102.162 71.6205,102.162;
            
M105.458,86.9005L106.907,89.0485L69.5305,108.142L68.7175,105.944C68.7175,105.944 67.1175,101.87 63.4175,99.5755C60.2075,97.4055 26.3605,73.8965 26.3725,63.8795C26.4455,58.7045 24.4185,55.3095 22.9445,52.8415C21.6675,50.8415 20.5625,48.9895 21.3645,46.9885C21.8875,45.4935 23.2425,44.4175 25.2845,43.9335C28.1085,43.2275 32.9545,43.8155 36.4125,47.0975C39.3425,49.7745 41.4705,54.4535 43.5855,58.9725C43.9665,59.7505 44.7165,61.1445 45.4035,61.7375C49.5855,66.0935 52.4095,65.3865 55.0445,62.2715C57.8255,58.9835 55.8715,40.2365 51.8785,38.2885C48.8905,36.9085 45.3925,37.1835 40.8265,36.0885C36.1015,35.0065 30.9125,34.1215 30.7885,28.4775C31.0635,25.8715 31.5985,24.5365 34.8365,22.9895C42.0825,19.5125 58.2515,17.5945 66.1585,24.5655C68.2185,26.3425 69.8845,27.1805 71.0025,29.1925C72.0655,28.4625 74.5205,27.1385 76.2695,27.0015C82.3125,26.5265 101.287,52.1735 101.459,52.3215C104.014,56.3205 102.56,72.4275 101.985,77.3195C101.773,80.7285 105.458,86.9005 105.458,86.9005M71.6205,102.162L100.529,87.2885C99.2145,84.8065 97.2835,80.5965 97.7875,76.8415C98.8175,67.5525 99.0725,56.5475 97.9665,54.6965C94.8725,49.9315 80.0505,32.3585 76.6105,31.3365C75.3385,31.4365 74.5945,32.1405 74.1425,32.4995C74.9295,34.3765 75.3995,36.2775 76.0025,37.8455C76.6565,40.0555 77.2855,41.9455 78.0475,43.5005C78.6125,44.5865 78.2365,45.9085 77.1615,46.4785C76.0865,47.0475 74.7765,46.6655 74.2105,45.5795C73.0925,43.5675 72.4395,41.3565 71.7725,38.9865C71.1445,37.0965 70.6625,35.0345 69.7155,33.1705C69.7155,33.1705 69.7025,33.0105 69.5435,33.0225C68.3875,30.5285 66.0105,28.7775 63.5945,26.5445C57.2445,21.0665 42.8255,22.8465 36.9725,25.7295C34.5035,26.8925 34.4585,28.3505 34.4835,28.6715C34.4635,30.4505 36.2755,31.1155 41.3315,32.3335C46.5455,33.5385 53.8345,32.6425 57.1765,38.5185C57.7295,39.4445 59.0625,44.1855 59.1885,45.7915C60.8725,59.0665 60.2335,63.1555 54.0175,67.5215C49.2395,69.8355 42.4555,66.9765 39.3805,60.4335C37.4625,56.3845 35.5195,52.0135 33.2755,49.9285C31.2035,47.9915 28.4495,47.5615 26.8595,47.6865C26.0645,47.7495 25.5995,47.9475 25.4535,48.1205C25.6505,48.5895 26.2035,49.5155 26.5845,50.2935C28.2425,53.0705 30.6505,57.2435 30.6655,63.5425C30.6105,70.9775 57.2035,89.7255 65.6465,95.3615C68.7105,97.7055 71.6205,102.162 71.6205,102.162"/>
    </path>

</svg>