3

Я хотел бы анимировать фигуры и предотвратить их возврат в исходную точку после окончания анимации.

Я подумал использовать animation-fill-mode: forwards;, но я не уверен, что это применимо к SVG и где разместить его среди моих тегов.

Здесь видно, что мой круг перемещается в верхнем левом углу, в то время как я хотел бы, чтобы он оставался там, где заканчивается его траектория движения, в вершине шестиугольника.

<!DOCTYPE HTML>
  <html>
    <body>
      <?xml version="1.0"?>
    <svg width="400" height="400" viewBox="0 0 200 200"
        xmlns="http://www.w3.org/2000/svg" version="1.1"
        xmlns:xlink="http://www.w3.org/1999/xlink" style="background:aquamarine">
        <style>
        path {
          animation-name:animateDash;
          animation-duration:5s;
          animation-iteration-count:once;
          animation-fill-mode:forwards;
        }
        @keyframes animateDash {
          from{stroke-dasharray:0,2305}
          to  {stroke-dasharray:2305,0}
        }
        </style>


        <circle cx="50%" cy="50%" r="1" fill="firebrick"  />

        <path id="theMotionPath" d="m 100,100 -3e-6,-52.916668 45.82718,26.458333 0,52.916665" stroke-width="5px" stroke="antiquewhite" fill="none" stroke-linecap="round" stroke-linejoin="round" />

        <path id="theMotionPath2" d="m 100,100 -3e-6,-52.916668 45.82718,26.458333 0,52.916665" stroke-width="5px" stroke="aqua" fill="none" style="transform-origin:50%;transform: rotate(120deg);" stroke-linecap="round" stroke-linejoin="round" />

        <path id="theMotionPath3" d="m 100,100 -3e-6,-52.916668 45.82718,26.458333 0,52.916665" stroke-width="5px" stroke="azure" fill="none" style="transform-origin:50%;transform: rotate(240deg);" stroke-linecap="round" stroke-linejoin="round" />

        <circle cx="0" cy="0" r="5" fill="#333333">
          <animateMotion dur="0.45s" repeatCount="once">
            <mpath xlink:href="#theMotionPath3"/>
          </animateMotion>
        </circle>

        <g style="transform-origin:50%;transform: rotate(120deg);">
          <circle cx="0" cy="0" r="5" fill="#333333">
            <animateMotion dur="0.45s" repeatCount="once">
              <mpath xlink:href="#theMotionPath3"/>
            </animateMotion>
          </circle>
        </g>

        <g style="transform-origin:50%;transform: rotate(240deg);">
          <circle cx="0" cy="0" r="5" fill="#333333">
            <animateMotion dur="0.45s" repeatCount="once">
              <mpath xlink:href="#theMotionPath3"/>
            </animateMotion>
          </circle>
        </g>

    </svg>
  </body>
</html>

Свободный перевод вопроса Is there an SVG equivalent of CSS' animation-fill-mode: forwards? от участника @Ph1.

1

1 ответ 1

3

Используйте fill = "freeze" в качестве атрибута animateMotion следующим образом:

<!-- https://stackoverflow.com/a/55648664/7394871 -->
<svg width="400" height="400" viewBox="0 0 200 200"
        xmlns="http://www.w3.org/2000/svg" version="1.1"
        xmlns:xlink="http://www.w3.org/1999/xlink" style="background:aquamarine">



        <circle cx="50%" cy="50%" r="1" fill="firebrick"  />

        <path id="theMotionPath" d="m 100,100 -0.000003,-52.916668 45.82718,26.458333 0,52.916665" stroke-width="5px" stroke="antiquewhite" fill="none" stroke-linecap="round" stroke-linejoin="round" />

        <path id="theMotionPath2" d="m 100,100 -0.000003,-52.916668 45.82718,26.458333 0,52.916665" stroke-width="5px" stroke="aqua" fill="none" style="transform-origin:50%;transform: rotate(120deg);" stroke-linecap="round" stroke-linejoin="round" />

        <path id="theMotionPath3" d="m 100,100 -0.000003,-52.916668 45.82718,26.458333 0,52.916665" stroke-width="5px" stroke="azure" fill="none" style="transform-origin:50%;transform: rotate(240deg);" stroke-linecap="round" stroke-linejoin="round" />

        <circle cx="0" cy="0" r="5" fill="#333333">
          <animateMotion dur="2.5s" repeatCount="once" fill="freeze">
            <mpath xlink:href="#theMotionPath3"/>
          </animateMotion>
        </circle>

        <g style="transform-origin:50%;transform: rotate(120deg);">
          <circle cx="0" cy="0" r="5" fill="#333333">
            <animateMotion dur="2.5s" repeatCount="once" fill="freeze">
              <mpath xlink:href="#theMotionPath3"/>
            </animateMotion>
          </circle>
        </g>

        <g style="transform-origin:50%;transform: rotate(240deg);">
          <circle cx="0" cy="0" r="5" fill="#333333">
            <animateMotion dur="2.5s" repeatCount="once" fill="freeze">
              <mpath xlink:href="#theMotionPath3"/>
            </animateMotion>
          </circle>
        </g>

    </svg>

Свободный перевод ответа Is there an SVG equivalent of CSS' animation-fill-mode: forwards? от участника @enxaneta.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.