Как выполнить анимацию из последнего состояния анимации SVG без использования JavaScript?

101
12 апреля 2022, 15:20

Я учусь использовать SVG и / или css clip-path. Я создал, что-то вроде этого:

<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 секунды, чтобы увидеть плавный переход от кролика к нарвалу.

  3. Как только я увижу нарвала, нажмите "To Owl" и подождите 3 секунды, чтобы увидеть плавный переход от нарвала к сове.

У меня 2 вопроса:

  1. Если я нажму на «To Bunny» и подожду 1 секунду, а затем сразу же нажму «To Owl», то я внезапно перейду к изображению нарвала, прежде чем он превратится в сову. Я не хочу резкого перехода. Мне нужен плавный переход от 1-секундного промежуточного состояния кролика к сове. Как этого добиться?

  2. Если при первой загрузке страницы я нажму «На Нарвала», сова внезапно исчезнет и покажет кролика перед переходом к нарвалу. Как мне избежать резкого перехода и плавно перейти от совы к нарвалу?

NOTE

Я НЕ МОГУ использовать javascript в своем коде. Я могу использовать только HTML и CSS. Следовательно, если есть решение CSS (например, путем творческого использования clip-path или каких-либо других средств), это сработает.
Я также не хочу добавлять кнопку для каждой возможной комбинации переходного состояния (например, сова-нарвал, сова-кролик, сова-сова, кролик-сова, кролик-нарвал, кролик-кролик, нарвал-кролик, нарвал-сова, нарвал-нарвал), потому что я планирую завести около 1000 разных животных.

Свободный перевод вопроса How to tween from last svg animation state without the use of JavaScript? от участника @John.

Answer 1

Решение Pure SVG

Работает и в FF и в Chrome

<div class="container" style="width:50vw;height:50vh">
<svg viewBox="0 0 400 200" style="border:1px solid;">
<path transform="translate(100,0)"
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" begin="Narwhal.click+0.25s" dur="3s" restart="whenNotActive" fill="freeze" 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"  />   
      <animate attributeName="d" begin="Bunny.click+0.25s" dur="3s" restart="whenNotActive" fill="freeze" 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"  />   
  <animate attributeName="d" begin="Owl.click+0.25s" dur="3s" restart="whenNotActive" fill="freeze" 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"  />    
  
  
</path> 
<g id="Bunny" style="cursor:pointer">
  <text  x="30" y="50" fill-size="16px" fill="black" >To Bunny</text> 
   <circle cx="15" cy="45" r="4" fill="gray" /> 
    <circle cx="15" cy="45" r="6" fill="transparent" stroke="gray" />
 </g> 
  
  <g id="Narwhal" style="cursor:pointer">
    <text  x="30" y="100" fill-size="16px" fill="black" >To Narwhal</text>  
      <circle cx="15" cy="95" r="4" fill="gray" /> 
        <circle cx="15" cy="95" r="6" fill="transparent" stroke="gray" />
 </g>  
 <g id="Owl" style="cursor:pointer">
    <text  x="30" y="150" fill-size="16px" fill="black" >To Owl</text>  
      <circle cx="15" cy="145" r="4" fill="gray" /> 
        <circle cx="15" cy="145" r="6" fill="transparent" stroke="gray" />
 </g> 
 
</svg>

Answer 2

Для этого вам понадобятся transitionsё CSS. Я собираюсь использовать :focus для имитации клика, но вы можете найти много уловок, таких как использование скрытого checkbox и т.lд., Но основной трюк останется прежним.
На самом деле работает только в 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>

Свободный перевод ответа от участника @Temani Afif.

READ ALSO
Как вызвать метод doDelete или doPut в сервлете из jsp
HTML

Как вызвать метод doDelete или doPut в сервлете из jsp

Всем привет!

 213
Несколько ключей для одного объекта
HTML

Несколько ключей для одного объекта

Мне необходимо связать несколько ключей с одним объектомНапример, у меня есть такой код:

 138
Php Форма и Select Option
HTML

Php Форма и Select Option

Подскажите пожалуйста как можно отправить(submit) Php форму с селектором(select) который при выборе значения(option и value) включает определенный Div с разными...

 199
Динамический ID
HTML

Динамический ID

Есть форма, которая вызывается на странице несколько разХочется чтобы у нее изменялся id по типу id="form+'i' ", где i увеличивается на один...

 174