如何在不使用JavaScript的情况下从上一个svg动画状态进行补间? [英] How to tween from last svg animation state without the use of JavaScript?

问题描述

我正在学习使用SVG和/或CSS剪切路径.我在下面创建了这样的内容:

I'm learning to use SVG and/or css clip-path. I created something like this below:

<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>

当我以用户身份执行以下步骤时，这非常有用:

This works great when I perform the following steps as a user:

1. 页面加载完成后，单击To Bunny并等待3秒钟，即可看到从猫头鹰到兔子的平滑过渡.
2. 一旦看到兔子，请单击To Narwhal并等待3秒钟，以查看从兔子到独角鲸的平稳过渡.
3. 一旦我看到独角鲸，请单击To Owl并等待3秒钟，以查看从独角鲸到猫头鹰的平稳过渡.

1. Once the page has loaded, click on To Bunny and wait 3 seconds to see a smooth transition from owl to bunny.
2. Once I see a bunny, click on To Narwhal and wait 3 seconds to see a smooth transition from bunny to narwhal.
3. Once I see a narwhal, click on To Owl and wait 3 seconds to see a smooth transition from narwhal to owl.

我有两个问题:

1. 如果我单击To Bunny并等待1秒钟，然后立即单击To Owl，那么我会突然变成独角鲸的形象，然后才变成猫头鹰.我不希望突然过渡. 我希望从兔子的1秒中间状态平稳过渡到猫头鹰.如何实现?
2. 在第一次加载页面上，如果我单击To Narwhal，猫头鹰会突然消失并显示一个兔子，然后过渡到独角鲸. 如何避免突然过渡并顺利地从猫头鹰变成独角鲸?

1. If I click on To Bunny and wait 1 second then immediately click on To Owl, then I am abruptly brought to an image of a narwhal before it transitions into an owl. I do not want an abrupt transition. I want a smooth transition from the 1 second intermediate state of the bunny to an owl. How can this be achieved?
2. Upon the page first loading, if I click on To Narwhal, the owl abruptly disappears and shows a a bunny before transitioning to a narwhal. How do I avoid the abrupt transition and go smoothly from owl to narwhal?

---

注意:

---

NOTE:

我无法在代码中使用javascript.我可以使用HTML和CSS.因此，如果有CSS解决方案(例如，通过创造性地使用剪切路径或其他方式)，那将是可行的.我还想避免为每种可能的过渡状态组合(例如owl-narwhal，owl-bunny，owl-owl，bunny-owl，bunny-narwhal，bunny-bunny，narwhal-bunny，narwhal-owl， narwhal-narwhal)，因为我计划养大约1000种不同的动物.

I can NOT use javascript in my code. I can use HTML and CSS. Hence, if there is a CSS solution (eg. through a creative use of clip-path or some other means), that would work. I also want to avoid printing a button for every possible combination of transition state (eg. owl-narwhal, owl-bunny, owl-owl, bunny-owl, bunny-narwhal, bunny-bunny, narwhal-bunny, narwhal-owl, narwhal-narwhal) because I plan to have about 1000 different animals.

推荐答案

您将需要CSS过渡.我将依靠:focus来模拟点击，但是您可以找到很多技巧，例如使用隐藏复选框等，但是主要技巧仍然相同.

You will need CSS transitions for this. I am going to rely on :focus to simulate the click but you can find a lot of tricks like using hidden checkbox and so on but the main trick remain the same.

实际上，它仅适用于Chrome. SVG属性作为CSS属性的支持仍然很低.

Actually it works only on Chrome. The support of SVG attribute as CSS properties is still low.

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>

这篇关于如何在不使用JavaScript的情况下从上一个svg动画状态进行补间?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！