每隔一段时间将 SVG 动画化为 运行
Animate SVG to run at intervals
我有一个沙漏的 SVG 动画。我已经在 SMIL 中成功实现了 fill 和 flowdown 动画。但我无法制作翻转动画。我希望翻转动画在 SMIL 中，并且 运行 在填充动画的总持续时间的最后 0.2s 以及 运行 间隔。
例如：
如果填充动画的总持续时间是 5s 那么 flip 动画应该 运行 在延迟 4.8s.
如果填充动画的总持续时间是 10s 那么 flip 动画应该 运行 在延迟 9.8s.
@keyframes flip {
0% {
transform: rotate(0deg);
}
98% {
transform: rotate(0deg);
}
100% {
transform: rotate(180deg);
}
}
#hourglass,
#hourglass #upper-fill-clip,
#hourglass #lower-fill-clip {
fill: #000000;
}
#hourglass {
animation-name: flip;
animation-duration: 10s;
animation-timing-function: linear;
animation-iteration-count: infinite;
transform-origin: center center;
}
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="212.17653" height="310" viewBox="0 0 212.17653 310" id="hourglass">
<defs>
<clipPath id="flowdown">
<path d="m 153.09976,190.92975 c 22.09717,217.28036 179.31249,274.21877 197.89215,327.9765 l 62.9374,0 c 18.72854,-53.17156 176.30873,-105.92478 197.9976,-327.99097" style="stroke-width:0" />
</clipPath>
<clipPath id="fillup">
<path d="M 296.23029,608.69417 C 236.36177,663.1914 150.52311,748.96721 150.52311,928.875 l 231.9375,0 231.9375,0 c 0,-181.67405 -83.81727,-266.73823 -143.5691,-320.06035" style="stroke-width:0" />
</clipPath>
</defs>
<g transform="matrix(0.3117516,0,0,0.3117516,-13.144444,-11.10242)" id="layer1">
<g transform="translate(14,-26)" id="g4027">
<rect width="648.51801" height="43.605999" x="44.201607" y="-1039.9561" transform="scale(1,-1)" id="rect3782" style="fill:#000000;fill-opacity:1;stroke:none" />
<rect width="579.82764" height="60" x="78.546791" y="-999.65149" transform="scale(1,-1)" id="rect3784" style="fill:#000000;fill-opacity:1;stroke:none" />
</g>
<path d="m 150.53125,138.59375 c 0,276.24024 202.375,328.98438 202.375,390.46875 0,1.83297 -1.12281,3.21907 -0.71875,4.6875 -0.40197,1.4611 0.71875,2.83465 0.71875,4.65625 0,59.91583 -202.375,114.22851 -202.375,390.46875 l 231.9375,0 231.9375,0 c 0,-282.29589 -202.375,-331.32933 -202.375,-390.46875 0,-1.8216 1.12072,-3.19515 0.71875,-4.65625 0.40406,-1.46843 -0.71875,-2.85453 -0.71875,-4.6875 0,-61.32924 202.375,-108.17286 202.375,-390.46875 l -231.9375,0 z" id="path3788" style="fill:none;stroke:#000000;stroke-width:30;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
<g transform="translate(14,-26)" id="g4043">
<rect width="648.51801" height="43.605999" x="44.201607" y="77.651443" id="rect4033" style="fill:#000000;fill-opacity:1;stroke:none" />
<rect width="579.82764" height="60" x="78.546791" y="117.95601" id="rect4035" style="fill:#000000;fill-opacity:1;stroke:none" />
</g>
<g clip-path="url(#flowdown)">
<rect width="744.09448" height="1052.3622" x="0" y="0" id="upper-fill-clip" />
<animate xlink:href="#upper-fill-clip" attributeName="y" from ="190" to="519" dur="10s" begin="0s" repeatCount="indefinite" />
</rect>
</g>
<g clip-path="url(#fillup)" >
<rect width="744.09448" height="1052.3622" x="0" y="0" id="lower-fill-clip">
<animate xlink:href="#lower-fill-clip" attributeName="y" from ="911" to="610" dur="10s" begin="0s" repeatCount="indefinite" />
</rect>
</g>
</g>
</svg>
如何将这个有效的 CSS 动画转换为 SMIL？
我找到了我自己问题的答案。这是片段。
#hourglass,
#hourglass #upper-fill-clip,
#hourglass #lower-fill-clip {
fill: #000000;
}
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="212.17653" height="310" viewBox="0 0 212.17653 310" id="hourglass">
<defs>
<clipPath id="flowdown">
<path d="m 153.09976,190.92975 c 22.09717,217.28036 179.31249,274.21877 197.89215,327.9765 l 62.9374,0 c 18.72854,-53.17156 176.30873,-105.92478 197.9976,-327.99097" style="stroke-width:0" />
</clipPath>
<clipPath id="fillup">
<path d="M 296.23029,608.69417 C 236.36177,663.1914 150.52311,748.96721 150.52311,928.875 l 231.9375,0 231.9375,0 c 0,-181.67405 -83.81727,-266.73823 -143.5691,-320.06035" style="stroke-width:0" />
</clipPath>
</defs>
<g transform="matrix(0.3117516,0,0,0.3117516,-13.144444,-11.10242)" id="layer1">
<g transform="translate(14,-26)" id="g4027">
<rect width="648.51801" height="43.605999" x="44.201607" y="-1039.9561" transform="scale(1,-1)" id="rect3782" style="fill:#000000;fill-opacity:1;stroke:none" />
<rect width="579.82764" height="60" x="78.546791" y="-999.65149" transform="scale(1,-1)" id="rect3784" style="fill:#000000;fill-opacity:1;stroke:none" />
</g>
<path d="m 150.53125,138.59375 c 0,276.24024 202.375,328.98438 202.375,390.46875 0,1.83297 -1.12281,3.21907 -0.71875,4.6875 -0.40197,1.4611 0.71875,2.83465 0.71875,4.65625 0,59.91583 -202.375,114.22851 -202.375,390.46875 l 231.9375,0 231.9375,0 c 0,-282.29589 -202.375,-331.32933 -202.375,-390.46875 0,-1.8216 1.12072,-3.19515 0.71875,-4.65625 0.40406,-1.46843 -0.71875,-2.85453 -0.71875,-4.6875 0,-61.32924 202.375,-108.17286 202.375,-390.46875 l -231.9375,0 z" id="path3788" style="fill:none;stroke:#000000;stroke-width:30;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
<g transform="translate(14,-26)" id="g4043">
<rect width="648.51801" height="43.605999" x="44.201607" y="77.651443" id="rect4033" style="fill:#000000;fill-opacity:1;stroke:none" />
<rect width="579.82764" height="60" x="78.546791" y="117.95601" id="rect4035" style="fill:#000000;fill-opacity:1;stroke:none" />
</g>
<g clip-path="url(#flowdown)">
<rect width="744.09448" height="1052.3622" x="0" y="519" id="upper-fill-clip" />
</g>
<g clip-path="url(#fillup)" >
<rect width="744.09448" height="1052.3622" x="0" y="0" id="lower-fill-clip" />
</g>
<animate id="aniFlowdown" xlink:href="#upper-fill-clip" attributeName="y" from ="190" to="519" dur="10s" begin="0;aniFlip.end" />
<animate id="aniFillup" xlink:href="#lower-fill-clip" attributeName="y" from ="911" to="610" dur="10s" begin="0;aniFlowdown.begin" />
<animateTransform id="aniFlip" xlink:href="#hourglass" attributeName="transform" type="rotate" from="0 0 0" to="180 0 0" begin="aniFlowdown.end-0.2" dur="0.2s" />
</g>
</svg>
我有一个沙漏的 SVG 动画。我已经在 SMIL 中成功实现了 fill 和 flowdown 动画。但我无法制作翻转动画。我希望翻转动画在 SMIL 中，并且 运行 在填充动画的总持续时间的最后 0.2s 以及 运行 间隔。
例如：
如果填充动画的总持续时间是 5s 那么 flip 动画应该 运行 在延迟 4.8s.
如果填充动画的总持续时间是 10s 那么 flip 动画应该 运行 在延迟 9.8s.
@keyframes flip {
0% {
transform: rotate(0deg);
}
98% {
transform: rotate(0deg);
}
100% {
transform: rotate(180deg);
}
}
#hourglass,
#hourglass #upper-fill-clip,
#hourglass #lower-fill-clip {
fill: #000000;
}
#hourglass {
animation-name: flip;
animation-duration: 10s;
animation-timing-function: linear;
animation-iteration-count: infinite;
transform-origin: center center;
}
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="212.17653" height="310" viewBox="0 0 212.17653 310" id="hourglass">
<defs>
<clipPath id="flowdown">
<path d="m 153.09976,190.92975 c 22.09717,217.28036 179.31249,274.21877 197.89215,327.9765 l 62.9374,0 c 18.72854,-53.17156 176.30873,-105.92478 197.9976,-327.99097" style="stroke-width:0" />
</clipPath>
<clipPath id="fillup">
<path d="M 296.23029,608.69417 C 236.36177,663.1914 150.52311,748.96721 150.52311,928.875 l 231.9375,0 231.9375,0 c 0,-181.67405 -83.81727,-266.73823 -143.5691,-320.06035" style="stroke-width:0" />
</clipPath>
</defs>
<g transform="matrix(0.3117516,0,0,0.3117516,-13.144444,-11.10242)" id="layer1">
<g transform="translate(14,-26)" id="g4027">
<rect width="648.51801" height="43.605999" x="44.201607" y="-1039.9561" transform="scale(1,-1)" id="rect3782" style="fill:#000000;fill-opacity:1;stroke:none" />
<rect width="579.82764" height="60" x="78.546791" y="-999.65149" transform="scale(1,-1)" id="rect3784" style="fill:#000000;fill-opacity:1;stroke:none" />
</g>
<path d="m 150.53125,138.59375 c 0,276.24024 202.375,328.98438 202.375,390.46875 0,1.83297 -1.12281,3.21907 -0.71875,4.6875 -0.40197,1.4611 0.71875,2.83465 0.71875,4.65625 0,59.91583 -202.375,114.22851 -202.375,390.46875 l 231.9375,0 231.9375,0 c 0,-282.29589 -202.375,-331.32933 -202.375,-390.46875 0,-1.8216 1.12072,-3.19515 0.71875,-4.65625 0.40406,-1.46843 -0.71875,-2.85453 -0.71875,-4.6875 0,-61.32924 202.375,-108.17286 202.375,-390.46875 l -231.9375,0 z" id="path3788" style="fill:none;stroke:#000000;stroke-width:30;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
<g transform="translate(14,-26)" id="g4043">
<rect width="648.51801" height="43.605999" x="44.201607" y="77.651443" id="rect4033" style="fill:#000000;fill-opacity:1;stroke:none" />
<rect width="579.82764" height="60" x="78.546791" y="117.95601" id="rect4035" style="fill:#000000;fill-opacity:1;stroke:none" />
</g>
<g clip-path="url(#flowdown)">
<rect width="744.09448" height="1052.3622" x="0" y="0" id="upper-fill-clip" />
<animate xlink:href="#upper-fill-clip" attributeName="y" from ="190" to="519" dur="10s" begin="0s" repeatCount="indefinite" />
</rect>
</g>
<g clip-path="url(#fillup)" >
<rect width="744.09448" height="1052.3622" x="0" y="0" id="lower-fill-clip">
<animate xlink:href="#lower-fill-clip" attributeName="y" from ="911" to="610" dur="10s" begin="0s" repeatCount="indefinite" />
</rect>
</g>
</g>
</svg>
如何将这个有效的 CSS 动画转换为 SMIL？
我找到了我自己问题的答案。这是片段。
#hourglass,
#hourglass #upper-fill-clip,
#hourglass #lower-fill-clip {
fill: #000000;
}
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="212.17653" height="310" viewBox="0 0 212.17653 310" id="hourglass">
<defs>
<clipPath id="flowdown">
<path d="m 153.09976,190.92975 c 22.09717,217.28036 179.31249,274.21877 197.89215,327.9765 l 62.9374,0 c 18.72854,-53.17156 176.30873,-105.92478 197.9976,-327.99097" style="stroke-width:0" />
</clipPath>
<clipPath id="fillup">
<path d="M 296.23029,608.69417 C 236.36177,663.1914 150.52311,748.96721 150.52311,928.875 l 231.9375,0 231.9375,0 c 0,-181.67405 -83.81727,-266.73823 -143.5691,-320.06035" style="stroke-width:0" />
</clipPath>
</defs>
<g transform="matrix(0.3117516,0,0,0.3117516,-13.144444,-11.10242)" id="layer1">
<g transform="translate(14,-26)" id="g4027">
<rect width="648.51801" height="43.605999" x="44.201607" y="-1039.9561" transform="scale(1,-1)" id="rect3782" style="fill:#000000;fill-opacity:1;stroke:none" />
<rect width="579.82764" height="60" x="78.546791" y="-999.65149" transform="scale(1,-1)" id="rect3784" style="fill:#000000;fill-opacity:1;stroke:none" />
</g>
<path d="m 150.53125,138.59375 c 0,276.24024 202.375,328.98438 202.375,390.46875 0,1.83297 -1.12281,3.21907 -0.71875,4.6875 -0.40197,1.4611 0.71875,2.83465 0.71875,4.65625 0,59.91583 -202.375,114.22851 -202.375,390.46875 l 231.9375,0 231.9375,0 c 0,-282.29589 -202.375,-331.32933 -202.375,-390.46875 0,-1.8216 1.12072,-3.19515 0.71875,-4.65625 0.40406,-1.46843 -0.71875,-2.85453 -0.71875,-4.6875 0,-61.32924 202.375,-108.17286 202.375,-390.46875 l -231.9375,0 z" id="path3788" style="fill:none;stroke:#000000;stroke-width:30;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
<g transform="translate(14,-26)" id="g4043">
<rect width="648.51801" height="43.605999" x="44.201607" y="77.651443" id="rect4033" style="fill:#000000;fill-opacity:1;stroke:none" />
<rect width="579.82764" height="60" x="78.546791" y="117.95601" id="rect4035" style="fill:#000000;fill-opacity:1;stroke:none" />
</g>
<g clip-path="url(#flowdown)">
<rect width="744.09448" height="1052.3622" x="0" y="519" id="upper-fill-clip" />
</g>
<g clip-path="url(#fillup)" >
<rect width="744.09448" height="1052.3622" x="0" y="0" id="lower-fill-clip" />
</g>
<animate id="aniFlowdown" xlink:href="#upper-fill-clip" attributeName="y" from ="190" to="519" dur="10s" begin="0;aniFlip.end" />
<animate id="aniFillup" xlink:href="#lower-fill-clip" attributeName="y" from ="911" to="610" dur="10s" begin="0;aniFlowdown.begin" />
<animateTransform id="aniFlip" xlink:href="#hourglass" attributeName="transform" type="rotate" from="0 0 0" to="180 0 0" begin="aniFlowdown.end-0.2" dur="0.2s" />
</g>
</svg>