svg 中的动画标签不会像预期的那样触发动画
Animate tag in svg doesn't trigger animation like expected
我正在尝试为 svg 路径制作动画大约 3 天..
当我使用 <animate> 标签时，发生了转换，但是它没有任何动画，只是从位置 A 到位置 B。
我希望在两者之间有一个过渡，这样看起来很流畅。我该怎么办？
<div class="container">
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 167 1888.69">
<defs>
<style>
.cls-1 {
fill: #f2f2f2;
}
.cls-2 {
fill: #65bec0;
}
.cls-3 {
fill: #88d3cd;
}
.cls-4 {
fill: #60b9bc;
}
</style>
</defs>
<path id="glass" class="cls-1" d="M927.2,52.82c16.15,0,30.77,5.53,41.37,14.51s17.13,21.38,17.13,35.08l.3,1620.4c0,27.38-26.19,49.6-58.49,49.6-16.15,0-30.77-5.53-41.37-14.51S869,1736.52,869,1722.83l-.3-1620.4C868.71,75,894.9,52.83,927.2,52.82Z" transform="translate(-819 -52.82)"/>
<path class="cls-2" d="M881.46,1086.43h.09l-.09.06Z" transform="translate(-819 -52.82)"/>
<path id="back-liquid" class="cls-3" d="M925.15,1767.18c27.63.11,50.13-21.59,50.23-48.44L977,1285.27l.51-294.54s-26.11-2.52-49.22-16.49c-12.79-7.73-48.11,12.32-55.73,15.79l3.75,449.17,0,289.36a48.12,48.12,0,0,0,13.45,24.25A50.6,50.6,0,0,0,925.15,1767.18Z" transform="translate(-819 -52.82)"/>
<g id="front-liquid">
<path class="cls-4" transform="translate(-819 -52.82)">
<animate
id="poi_front_1"
attributeName="d"
values="M929.78,1765.31c-29.07.12-52.74-21.56-52.87-48.42l-2-433.46-.74-294.54s28.27,1.81,51-14.37c14.77-10.5,47,4.34,53.86,15.48l1.87,447.29.17,289.36A47.56,47.56,0,0,1,967,1750.91,54.74,54.74,0,0,1,929.78,1765.31Z;
m 929.78,1765.31 c -29.07,0.12 -52.74,-21.56 -52.87,-48.42 l -2,-433.46 -2.35,-293.4 c 0,0 29.04531,-29.79622 50.10593,-17.59673 31.46382,10.78462 34.47963,16.02568 55.52938,6.71575 L 980.9,1437.29 l 0.17,289.36 c -2.14495,9.3171 -7.04817,17.7714 -14.07,24.26 -10.15255,9.3127 -23.4433,14.4547 -37.22,14.4Z"
begin="0s; poi_front_2.end"
dur="1s"
/>
<animate
id="poi_front_2"
attributeName="d"
values="m 929.78,1765.31 c -29.07,0.12 -52.74,-21.56 -52.87,-48.42 l -2,-433.46 -2.35,-293.4 c 0,0 29.04531,-29.79622 50.10593,-17.59673 31.46382,10.78462 34.47963,16.02568 55.52938,6.71575 L 980.9,1437.29 l 0.17,289.36 c -2.14495,9.3171 -7.04817,17.7714 -14.07,24.26 -10.15255,9.3127 -23.4433,14.4547 -37.22,14.4 z;
M929.78,1765.31c-29.07.12-52.74-21.56-52.87-48.42l-2-433.46-.74-294.54s28.27,1.81,51-14.37c14.77-10.5,47,4.34,53.86,15.48l1.87,447.29.17,289.36A47.56,47.56,0,0,1,967,1750.91,54.74,54.74,0,0,1,929.78,1765.31Z"
begin="poi_front_1.end"
dur="1.5s"
/>
</path>
</g>
</svg>
</div>
html,body {width:100%; height:100%;}
.container{
width: 80%;
height: 80vh;
margin:auto;
}
svg {
width: 60%;
height:80vh;
margin: auto;
}
这是我的 svg 的代码笔演示：https://codepen.io/knudsem/pen/oNxoxrB
编辑：我尝试重新组织这些值，但仍然没有成功。我不明白，我错过了什么？
两个观察结果：
您不需要 2 个动画。您可以为动画使用一个包含 3 个值的列表：values ="v1;v2;v1" 这与 repeatCount="indefinite" 一起可以解决问题。
其次：在这种情况下，除了中间的 C 和 S 命令外，路径应该相同。您需要以相同的顺序保持相同的命令，仅更改曲线控制点的 y 值。
此外，由于我手动更改了 d 属性，因此我使用此转换器将其转换为所有绝对值：https://codepen.io/leaverou/pen/RmwzKv
<svg viewBox="0 850 167 1888.69">
<g id="front-liquid">
<path transform="translate(-819 -52.82)" stroke="red" stroke-width="5" fill="none" d="
M929.78,1765.31
C900.71,1765.43,877.04,1743.75,876.91,1716.89
L874.91,990.03
C872.5,990 901.6,950.2,922.7,972.4
S957.1,988.4,978.2,979.1
L980.9,1726.65
C978.925,1735.9671,974.022,1744.42,967,1750.91
C956.847,1760.2227,943.56,1765.3647,929.78,1765.31 Z">
<animate attributeName="d" values="M929.78,1765.31
C900.71,1765.43,877.04,1743.75,876.91,1716.89
L874.91,990.03
C872.5,990 901.6,988.2 922.7,972.4
S957.1,960 978.2,979.1
L980.9,1726.65
C978.925,1735.9671,974.022,1744.42,967,1750.91
C956.847,1760.2227,943.56,1765.3647,929.78,1765.31 Z;
M929.78,1765.31
C900.71,1765.43,877.04,1743.75,876.91,1716.89
L874.91,990.03
C872.5,990 901.6,950.2,922.7,972.4
S957.1,988.4,978.2,979.1
L980.9,1726.65
C978.925,1735.9671,974.022,1744.42,967,1750.91
C956.847,1760.2227,943.56,1765.3647,929.78,1765.31 Z;
M929.78,1765.31
C900.71,1765.43,877.04,1743.75,876.91,1716.89
L874.91,990.03
C872.5,990 901.6,988.2 922.7,972.4
S957.1,960 978.2,979.1
L980.9,1726.65
C978.925,1735.9671,974.022,1744.42,967,1750.91
C956.847,1760.2227,943.56,1765.3647,929.78,1765.31 Z" begin="0s;" dur="1s" repeatCount="indefinite" />
</path>
</g>
</svg>
我删除了非动画路径并更改了 viewBox 值，以便能够看到形状的相关部分。你可以改回原来的样子，
我正在尝试为 svg 路径制作动画大约 3 天..
当我使用 <animate> 标签时，发生了转换，但是它没有任何动画，只是从位置 A 到位置 B。
我希望在两者之间有一个过渡，这样看起来很流畅。我该怎么办？
<div class="container">
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 167 1888.69">
<defs>
<style>
.cls-1 {
fill: #f2f2f2;
}
.cls-2 {
fill: #65bec0;
}
.cls-3 {
fill: #88d3cd;
}
.cls-4 {
fill: #60b9bc;
}
</style>
</defs>
<path id="glass" class="cls-1" d="M927.2,52.82c16.15,0,30.77,5.53,41.37,14.51s17.13,21.38,17.13,35.08l.3,1620.4c0,27.38-26.19,49.6-58.49,49.6-16.15,0-30.77-5.53-41.37-14.51S869,1736.52,869,1722.83l-.3-1620.4C868.71,75,894.9,52.83,927.2,52.82Z" transform="translate(-819 -52.82)"/>
<path class="cls-2" d="M881.46,1086.43h.09l-.09.06Z" transform="translate(-819 -52.82)"/>
<path id="back-liquid" class="cls-3" d="M925.15,1767.18c27.63.11,50.13-21.59,50.23-48.44L977,1285.27l.51-294.54s-26.11-2.52-49.22-16.49c-12.79-7.73-48.11,12.32-55.73,15.79l3.75,449.17,0,289.36a48.12,48.12,0,0,0,13.45,24.25A50.6,50.6,0,0,0,925.15,1767.18Z" transform="translate(-819 -52.82)"/>
<g id="front-liquid">
<path class="cls-4" transform="translate(-819 -52.82)">
<animate
id="poi_front_1"
attributeName="d"
values="M929.78,1765.31c-29.07.12-52.74-21.56-52.87-48.42l-2-433.46-.74-294.54s28.27,1.81,51-14.37c14.77-10.5,47,4.34,53.86,15.48l1.87,447.29.17,289.36A47.56,47.56,0,0,1,967,1750.91,54.74,54.74,0,0,1,929.78,1765.31Z;
m 929.78,1765.31 c -29.07,0.12 -52.74,-21.56 -52.87,-48.42 l -2,-433.46 -2.35,-293.4 c 0,0 29.04531,-29.79622 50.10593,-17.59673 31.46382,10.78462 34.47963,16.02568 55.52938,6.71575 L 980.9,1437.29 l 0.17,289.36 c -2.14495,9.3171 -7.04817,17.7714 -14.07,24.26 -10.15255,9.3127 -23.4433,14.4547 -37.22,14.4Z"
begin="0s; poi_front_2.end"
dur="1s"
/>
<animate
id="poi_front_2"
attributeName="d"
values="m 929.78,1765.31 c -29.07,0.12 -52.74,-21.56 -52.87,-48.42 l -2,-433.46 -2.35,-293.4 c 0,0 29.04531,-29.79622 50.10593,-17.59673 31.46382,10.78462 34.47963,16.02568 55.52938,6.71575 L 980.9,1437.29 l 0.17,289.36 c -2.14495,9.3171 -7.04817,17.7714 -14.07,24.26 -10.15255,9.3127 -23.4433,14.4547 -37.22,14.4 z;
M929.78,1765.31c-29.07.12-52.74-21.56-52.87-48.42l-2-433.46-.74-294.54s28.27,1.81,51-14.37c14.77-10.5,47,4.34,53.86,15.48l1.87,447.29.17,289.36A47.56,47.56,0,0,1,967,1750.91,54.74,54.74,0,0,1,929.78,1765.31Z"
begin="poi_front_1.end"
dur="1.5s"
/>
</path>
</g>
</svg>
</div>
html,body {width:100%; height:100%;}
.container{
width: 80%;
height: 80vh;
margin:auto;
}
svg {
width: 60%;
height:80vh;
margin: auto;
}
这是我的 svg 的代码笔演示：https://codepen.io/knudsem/pen/oNxoxrB
编辑：我尝试重新组织这些值，但仍然没有成功。我不明白，我错过了什么？
两个观察结果：
您不需要 2 个动画。您可以为动画使用一个包含 3 个值的列表：values ="v1;v2;v1" 这与 repeatCount="indefinite" 一起可以解决问题。
其次：在这种情况下，除了中间的 C 和 S 命令外，路径应该相同。您需要以相同的顺序保持相同的命令，仅更改曲线控制点的 y 值。
此外，由于我手动更改了 d 属性，因此我使用此转换器将其转换为所有绝对值：https://codepen.io/leaverou/pen/RmwzKv
<svg viewBox="0 850 167 1888.69">
<g id="front-liquid">
<path transform="translate(-819 -52.82)" stroke="red" stroke-width="5" fill="none" d="
M929.78,1765.31
C900.71,1765.43,877.04,1743.75,876.91,1716.89
L874.91,990.03
C872.5,990 901.6,950.2,922.7,972.4
S957.1,988.4,978.2,979.1
L980.9,1726.65
C978.925,1735.9671,974.022,1744.42,967,1750.91
C956.847,1760.2227,943.56,1765.3647,929.78,1765.31 Z">
<animate attributeName="d" values="M929.78,1765.31
C900.71,1765.43,877.04,1743.75,876.91,1716.89
L874.91,990.03
C872.5,990 901.6,988.2 922.7,972.4
S957.1,960 978.2,979.1
L980.9,1726.65
C978.925,1735.9671,974.022,1744.42,967,1750.91
C956.847,1760.2227,943.56,1765.3647,929.78,1765.31 Z;
M929.78,1765.31
C900.71,1765.43,877.04,1743.75,876.91,1716.89
L874.91,990.03
C872.5,990 901.6,950.2,922.7,972.4
S957.1,988.4,978.2,979.1
L980.9,1726.65
C978.925,1735.9671,974.022,1744.42,967,1750.91
C956.847,1760.2227,943.56,1765.3647,929.78,1765.31 Z;
M929.78,1765.31
C900.71,1765.43,877.04,1743.75,876.91,1716.89
L874.91,990.03
C872.5,990 901.6,988.2 922.7,972.4
S957.1,960 978.2,979.1
L980.9,1726.65
C978.925,1735.9671,974.022,1744.42,967,1750.91
C956.847,1760.2227,943.56,1765.3647,929.78,1765.31 Z" begin="0s;" dur="1s" repeatCount="indefinite" />
</path>
</g>
</svg>
我删除了非动画路径并更改了 viewBox 值，以便能够看到形状的相关部分。你可以改回原来的样子，