css - 如何在不使用 JavaScript 的情况下从上一个 svg 动画状态进行补间？

Question

我正在学习使用 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>

当我以用户身份执行以下步骤时，效果很好:

1. 页面加载后，点击 To Bunny 并等待 3 秒，以查看从猫头鹰到兔子的平滑过渡。
2. 一旦我看到一只兔子，点击 To Narwhal 并等待 3 秒以查看从兔子到独 Angular 鲸的平滑过渡。
3. 一旦我看到一只独 Angular 鲸，点击To Owl 并等待 3 秒以看到从独 Angular 鲸到猫头鹰的平滑过渡。

我有两个问题:

1. 如果我点击 To Bunny 并等待 1 秒，然后立即点击 To Owl，然后我会突然被带到一个独 Angular 鲸的图像，然后它会转变为一个猫头鹰。我不想突然过渡。 我想要从兔子的 1 秒中间状态平滑过渡到猫头鹰。如何实现？
2. 首次加载页面时，如果我点击 To Narwhal，猫头鹰会突然消失并显示一只兔子，然后再变成独 Angular 鲸。 如何避免从猫头鹰到独 Angular 鲸的突然过渡并顺利过渡？

---

注意:

我不能在我的代码中使用 javascript。我可以使用 HTML 和 CSS。因此，如果有一个 CSS 解决方案(例如，通过创造性地使用 clip-path 或其他方式)，那将是可行的。我还想避免为每个可能的过渡状态组合打印一个按钮(例如，owl-narwhal、owl-bunny、owl-owl、bunny-owl、bunny-narwhal、bunny-bunny、narwhal-bunny、narwhal-owl， narwhal-narwhal)，因为我计划拥有大约 1000 种不同的动物。

Answer 1

为此您需要 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>