问题
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:
- Once the page has loaded, click on
To Bunnyand wait 3 seconds to see a smooth transition from owl to bunny. - Once I see a bunny, click on
To Narwhaland wait 3 seconds to see a smooth transition from bunny to narwhal. - Once I see a narwhal, click on
To Owland wait 3 seconds to see a smooth transition from narwhal to owl.
I have two questions:
- If I click on
To Bunnyand wait 1 second then immediately click onTo 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? - 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:
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.
回答1:
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.
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>回答2:
I know you have clearly mentioned that you don't want javascript in your code.. But if inline-javascript is fine than you can achieve it.
See the Snippet below:
<svg style="width:300px;height:300px;" viewBox="0 0 100 200">
<text id="bunny" y="50" onclick="shape.setAttribute('from', shape.getAttribute('d'))">To Bunny</text>
<text id="narwhal" y="100" onclick="shape.setAttribute('from', shape.getAttribute('d'))">To Narwhal</text>
<text id="owl" y="150" onclick="shape.setAttribute('from', shape.getAttribute('d'))">To Owl</text>
parent.shape = document.getElementById('shape');
</svg>
<svg viewBox="0 0 251 151" style="width:251px;height:151px;">
<path id="shape"
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 xlink:href="#shape" attributeName="d" dur="3s" to="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 xlink:href="#shape" attributeName="d" dur="3s" to="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 xlink:href="#shape" attributeName="d" dur="3s" to="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>来源：https://stackoverflow.com/questions/59460584/how-to-tween-from-last-svg-animation-state-without-the-use-of-javascript