我正在学习使用SVG和/或CSS剪切路径。我在下面创建了以下内容：
<svg style="width:300px;height:300px;" viewBox="0 0 100 200">
<text id="bunny" y="50">To Bunny</text>
<text id="narwhal" y="100">To Narwhal</text>
<text id="owl" y="150">To Owl</text>
</svg>
<svg viewBox="0 0 251 151" style="width:251px;height:151px;">
<path
style="fill:#000000;stroke-width:0.24899985"
d="m 107.45572,142.20417 c 23.14589,-23.16487 -21.336378,-20.31025 -7.05538,-90.921248 c -6.407998,-4.928 -4.772998,-22.843 -1.057998,-27.925 c -3.286,-5.915 -5.064,-11.833 -3.224,-19.6449999 c 10.353458,4.278355 4.358328,13.2052149 9.188158,16.3896839 c 2.83482,-3.978774 19.89953,-2.5827 22.83682,-0.382425 c 2.22057,-3.72037 15.7747,-13.7547919 15.40755,-8.903009 c -4.46513,2.454775 -0.70862,4.283774 -9.01695,12.224488 c 5.32964,8.207908 5.67935,17.501915 5.65539,25.031104 c 25.57685,28.403498 32.42875,80.056386 26.91114,100.271796 c -19.03026,-23.25184 -24.89244,-17.94927 -27.35238,-14.52863 c 2.22065,3.16303 3.8171,5.07083 3.50709,11.49096 c -11.42263,-10.20222 -22.30212,-8.01914 -35.79944,-3.10272 z">
<animate attributeName="d" dur="3s" values="m 107.45572,142.20417 c 23.14589,-23.16487 -21.336378,-20.31025 -7.05538,-90.921248 c -6.407998,-4.928 -4.772998,-22.843 -1.057998,-27.925 c -3.286,-5.915 -5.064,-11.833 -3.224,-19.6449999 c 10.353458,4.278355 4.358328,13.2052149 9.188158,16.3896839 c 2.83482,-3.978774 19.89953,-2.5827 22.83682,-0.382425 c 2.22057,-3.72037 15.7747,-13.7547919 15.40755,-8.903009 c -4.46513,2.454775 -0.70862,4.283774 -9.01695,12.224488 c 5.32964,8.207908 5.67935,17.501915 5.65539,25.031104 c 25.57685,28.403498 32.42875,80.056386 26.91114,100.271796 c -19.03026,-23.25184 -24.89244,-17.94927 -27.35238,-14.52863 c 2.22065,3.16303 3.8171,5.07083 3.50709,11.49096 c -11.42263,-10.20222 -22.30212,-8.01914 -35.79944,-3.10272 z;m 89.494017,128.29114 c -17.537318,4.70572 -17.440284,-18.82626 -5.198778,-11.71895 c -1.120176,-48.353379 46.465341,-36.367219 43.688411,-52.616348 c -0.38488,-4.85467 -0.1748,-10.013571 1.62233,-13.766411 c -5.35178,-3.280661 -28.27418,-39.413067 -4.47682,-31.023332 c -1.64289,-9.6226048 9.29133,-5.858992 9.29133,-5.858992 c 12.4515,7.34202 10.88358,27.874772 18.01304,27.838204 c 29.10892,9.125141 25.62422,23.465759 3.92954,33.854779 c -0.76675,16.418049 -7.3631,27.14171 -12.58769,32.88109 c 1.24692,3.75899 -0.60236,8.7394 -0.60236,8.7394 c 11.91489,4.19146 6.19418,11.95469 3.43187,11.65782 c -0.42549,12.54599 -13.84325,2.31882 -19.57139,7.173 c -10.23733,5.18214 -36.03487,0.32112 -37.539483,-7.16026 z" keyTimes="0;1" repeatCount="1" begin="bunny.click" fill="freeze" />
<animate attributeName="d" dur="3s" values="m 89.494017,128.29114 c -17.537318,4.70572 -17.440284,-18.82626 -5.198778,-11.71895 c -1.120176,-48.353379 46.465341,-36.367219 43.688411,-52.616348 c -0.38488,-4.85467 -0.1748,-10.013571 1.62233,-13.766411 c -5.35178,-3.280661 -28.27418,-39.413067 -4.47682,-31.023332 c -1.64289,-9.6226048 9.29133,-5.858992 9.29133,-5.858992 c 12.4515,7.34202 10.88358,27.874772 18.01304,27.838204 c 29.10892,9.125141 25.62422,23.465759 3.92954,33.854779 c -0.76675,16.418049 -7.3631,27.14171 -12.58769,32.88109 c 1.24692,3.75899 -0.60236,8.7394 -0.60236,8.7394 c 11.91489,4.19146 6.19418,11.95469 3.43187,11.65782 c -0.42549,12.54599 -13.84325,2.31882 -19.57139,7.173 c -10.23733,5.18214 -36.03487,0.32112 -37.539483,-7.16026 z;m 72.508974,136.73728 c 4.332744,-3.10605 11.142522,-9.85084 9.252819,-14.11587 c -50.096547,0.24623 -75.8943341,-33.158339 -67.889952,-96.035109 c 0.592272,-3.720978 -1.440837,-10.01694 -13.27662208,-15.966066 c 9.50489308,0.181158 16.35525208,3.648389 20.18549908,12.418189 c 9.7479,0.9306 17.2341,10.983601 13.9518,13.108502 c -1.71,-6.115501 -9.6237,-7.228801 -14.4234,-6.197401 c -1.4769,9.070201 0.8163,17.286299 3.8061,22.808701 c 22.4253,41.424302 123.462912,-14.022 139.116602,44.1171 c 13.37859,2.594565 112.61108,13.816634 82.29525,12.282314 c -29.26985,-1.48315 -58.0041,-3.28 -83.47383,-4.62594 c -10.88589,41.32837 -61.16561,11.79613 -62.960651,16.42373 c -0.833949,4.34444 -17.116641,19.58891 -26.583516,15.78205 z" keyTimes="0;1" repeatCount="1" begin="narwhal.click" fill="freeze" />
<animate attributeName="d" dur="3s" values="m 72.508974,136.73728 c 4.332744,-3.10605 11.142522,-9.85084 9.252819,-14.11587 c -50.096547,0.24623 -75.8943341,-33.158339 -67.889952,-96.035109 c 0.592272,-3.720978 -1.440837,-10.01694 -13.27662208,-15.966066 c 9.50489308,0.181158 16.35525208,3.648389 20.18549908,12.418189 c 9.7479,0.9306 17.2341,10.983601 13.9518,13.108502 c -1.71,-6.115501 -9.6237,-7.228801 -14.4234,-6.197401 c -1.4769,9.070201 0.8163,17.286299 3.8061,22.808701 c 22.4253,41.424302 123.462912,-14.022 139.116602,44.1171 c 13.37859,2.594565 112.61108,13.816634 82.29525,12.282314 c -29.26985,-1.48315 -58.0041,-3.28 -83.47383,-4.62594 c -10.88589,41.32837 -61.16561,11.79613 -62.960651,16.42373 c -0.833949,4.34444 -17.116641,19.58891 -26.583516,15.78205 z;m 107.45572,142.20417 c 23.14589,-23.16487 -21.336378,-20.31025 -7.05538,-90.921248 c -6.407998,-4.928 -4.772998,-22.843 -1.057998,-27.925 c -3.286,-5.915 -5.064,-11.833 -3.224,-19.6449999 c 10.353458,4.278355 4.358328,13.2052149 9.188158,16.3896839 c 2.83482,-3.978774 19.89953,-2.5827 22.83682,-0.382425 c 2.22057,-3.72037 15.7747,-13.7547919 15.40755,-8.903009 c -4.46513,2.454775 -0.70862,4.283774 -9.01695,12.224488 c 5.32964,8.207908 5.67935,17.501915 5.65539,25.031104 c 25.57685,28.403498 32.42875,80.056386 26.91114,100.271796 c -19.03026,-23.25184 -24.89244,-17.94927 -27.35238,-14.52863 c 2.22065,3.16303 3.8171,5.07083 3.50709,11.49096 c -11.42263,-10.20222 -22.30212,-8.01914 -35.79944,-3.10272 z" keyTimes="0;1" repeatCount="1" begin="owl.click" fill="freeze" />
</path>
</svg>当我以用户身份执行以下步骤时，这非常有用：
页面加载后，单击
To Bunny并等待3秒钟，以查看从猫头鹰到兔子的平滑过渡。一旦看到兔子，请单击
To Narwhal并等待3秒钟，以查看从兔子到独角鲸的平稳过渡。一旦我看到独角鲸，请单击
To Owl并等待3秒钟，以查看从独角鲸到猫头鹰的平稳过渡。我有两个问题：
如果我单击
To Bunny并等待1秒钟，然后立即单击To Owl，则在突然转变为猫头鹰之前，我会被带到独角鲸的图像。我不希望突然过渡。我希望从兔子的1秒中间状态平稳过渡到猫头鹰。如何做到这一点？首次加载页面时，如果单击
To Narwhal，则猫头鹰会突然消失并显示一个兔子，然后过渡到独角鲸。我该如何避免突然转变并顺利地从猫头鹰变成独角鲸？注意：
我不能在代码中使用javascript。我可以使用HTML和CSS。因此，如果有CSS解决方案（例如，通过创造性地使用剪切路径或其他方式），那将是可行的。我还想避免为每种可能的过渡状态组合（例如owl-narwhal，owl-bunny，owl-owl，bunny-owl，bunny-narwhal，bunny-bunny，narwhal-bunny，narwhal-owl， narwhal-narwhal），因为我计划养大约1000种不同的动物。
最佳答案
为此，您将需要CSS过渡。我将依靠:focus来模拟点击，但是您可以找到很多技巧，例如使用隐藏的复选框等，但是主要技巧仍然相同。
实际上，它仅适用于Chrome。 SVG属性作为CSS属性的支持仍然很低。
span {
display:inline-block;
margin:5px;
outline:none;
cursor:pointer;
}
svg path {
transition:3s all;
}
#bunny:focus ~ svg path {
d: path("m 89.494017,128.29114 c -17.537318,4.70572 -17.440284,-18.82626 -5.198778,-11.71895 c -1.120176,-48.353379 46.465341,-36.367219 43.688411,-52.616348 c -0.38488,-4.85467 -0.1748,-10.013571 1.62233,-13.766411 c -5.35178,-3.280661 -28.27418,-39.413067 -4.47682,-31.023332 c -1.64289,-9.6226048 9.29133,-5.858992 9.29133,-5.858992 c 12.4515,7.34202 10.88358,27.874772 18.01304,27.838204 c 29.10892,9.125141 25.62422,23.465759 3.92954,33.854779 c -0.76675,16.418049 -7.3631,27.14171 -12.58769,32.88109 c 1.24692,3.75899 -0.60236,8.7394 -0.60236,8.7394 c 11.91489,4.19146 6.19418,11.95469 3.43187,11.65782 c -0.42549,12.54599 -13.84325,2.31882 -19.57139,7.173 c -10.23733,5.18214 -36.03487,0.32112 -37.539483,-7.16026 z");
}
#narwhal:focus ~ svg path {
d: path("m 72.508974,136.73728 c 4.332744,-3.10605 11.142522,-9.85084 9.252819,-14.11587 c -50.096547,0.24623 -75.8943341,-33.158339 -67.889952,-96.035109 c 0.592272,-3.720978 -1.440837,-10.01694 -13.27662208,-15.966066 c 9.50489308,0.181158 16.35525208,3.648389 20.18549908,12.418189 c 9.7479,0.9306 17.2341,10.983601 13.9518,13.108502 c -1.71,-6.115501 -9.6237,-7.228801 -14.4234,-6.197401 c -1.4769,9.070201 0.8163,17.286299 3.8061,22.808701 c 22.4253,41.424302 123.462912,-14.022 139.116602,44.1171 c 13.37859,2.594565 112.61108,13.816634 82.29525,12.282314 c -29.26985,-1.48315 -58.0041,-3.28 -83.47383,-4.62594 c -10.88589,41.32837 -61.16561,11.79613 -62.960651,16.42373 c -0.833949,4.34444 -17.116641,19.58891 -26.583516,15.78205 z");
}
#owl:focus ~ svg path {
d: path("m 107.45572,142.20417 c 23.14589,-23.16487 -21.336378,-20.31025 -7.05538,-90.921248 c -6.407998,-4.928 -4.772998,-22.843 -1.057998,-27.925 c -3.286,-5.915 -5.064,-11.833 -3.224,-19.6449999 c 10.353458,4.278355 4.358328,13.2052149 9.188158,16.3896839 c 2.83482,-3.978774 19.89953,-2.5827 22.83682,-0.382425 c 2.22057,-3.72037 15.7747,-13.7547919 15.40755,-8.903009 c -4.46513,2.454775 -0.70862,4.283774 -9.01695,12.224488 c 5.32964,8.207908 5.67935,17.501915 5.65539,25.031104 c 25.57685,28.403498 32.42875,80.056386 26.91114,100.271796 c -19.03026,-23.25184 -24.89244,-17.94927 -27.35238,-14.52863 c 2.22065,3.16303 3.8171,5.07083 3.50709,11.49096 c -11.42263,-10.20222 -22.30212,-8.01914 -35.79944,-3.10272 z");
}<span id="bunny" y="50" tabindex="-1">To Bunny</span>
<span id="narwhal" y="100" tabindex="-1">To Narwhal</span>
<span id="owl" y="150" tabindex="-1">To Owl</span>
<svg viewBox="0 0 251 151" style="width:251px;height:151px;">
<path
style="fill:#000000;stroke-width:0.24899985"
d="m 107.45572,142.20417 c 23.14589,-23.16487 -21.336378,-20.31025 -7.05538,-90.921248 c -6.407998,-4.928 -4.772998,-22.843 -1.057998,-27.925 c -3.286,-5.915 -5.064,-11.833 -3.224,-19.6449999 c 10.353458,4.278355 4.358328,13.2052149 9.188158,16.3896839 c 2.83482,-3.978774 19.89953,-2.5827 22.83682,-0.382425 c 2.22057,-3.72037 15.7747,-13.7547919 15.40755,-8.903009 c -4.46513,2.454775 -0.70862,4.283774 -9.01695,12.224488 c 5.32964,8.207908 5.67935,17.501915 5.65539,25.031104 c 25.57685,28.403498 32.42875,80.056386 26.91114,100.271796 c -19.03026,-23.25184 -24.89244,-17.94927 -27.35238,-14.52863 c 2.22065,3.16303 3.8171,5.07083 3.50709,11.49096 c -11.42263,-10.20222 -22.30212,-8.01914 -35.79944,-3.10272 z"/>
</svg>关于css - 如何在不使用JavaScript的情况下从上一个svg动画状态进行补间？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59460584/