4

Есть объект, который я анимирую с помощью animateMotion. После клика на кнопку остановки анимации stop объект должен вернуться на прежнее место, где он бы отрендерился без той же анимации, в данном случае x & y = 0, но при остановке анимации объект сохраняет своё местоположение, чего фактически не должно быть. Может я неправильно пытаюсь отключить анимацию, изменяю атрибут(xlink:href), принимающий объект, который будет двигаться вдоль пути, то есть квадрат, который есть в примере ниже. Может быть есть какие-то встроенные функции для SVG, в чём я очень сильно сомневаюсь, хотелось бы услышать вразумительный ответ по этому поводу.

Минимальный пример:

document.querySelector('button').onclick = () => {
  document.querySelector('#AM').setAttribute('xlink:href', '  ');
};
<div class="wrapper">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="border: 0.0625rem solid">
    <g class="main-area">
      <path d="M0 75L300 75" fill="none" stroke="red" id="AMP"/>
      <rect x="0" y="0" width="50" height="50" id="TrO" transform="translate(0 -25)"/>
      <animateMotion id="AM" xlink:href="#TrO" begin="0s" dur="3s" repeatCount="indefinite">
        <mpath xlink:href="#AMP"/>
      </animateMotion>
    </g>
  </svg>
  <button>Stop</button>
</div>

8
  • Интересный вопрос...
    – Air
    2 дек 2018 в 21:07
  • @Air, да, пожалуй. Можно ли назвать это багом SVG? Вот незадача=)
    – Arthur
    2 дек 2018 в 22:37
  • 1
    Arthur, я не изучал его так глубоко, чтобы иметь право говорить о баге...Кстати, на мой взгляд, JS довольно-таки умный язык и динамический развивается. Может и не баг, а осмысленное поведение и у него есть свое изящное решение... Вот пару решений привел Stepan Kasyanenko
    – Air
    3 дек 2018 в 5:38
  • 2
    Красивая цифра в репе))))))))
    – Air
    3 дек 2018 в 5:39
  • 2
    @Air Вот и я не плюсую Артуру пока, чтобы не испортить. В нашем чате с утра сохранил скрин на память :-) 3 дек 2018 в 5:48

2 ответа 2

6

Конечно, не самый лучший вариант, но работу свою делает.

document.querySelector('button').onclick = () => {
  const am = document.querySelector('#AM');
  am.querySelector('mpath').setAttribute('xlink:href', '#AMP1');
  am.setAttribute('repeatCount', '0');
};
<div class="wrapper">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="border: 0.0625rem solid">
    <g class="main-area">
      <path d="M0 75L300 75" fill="none" stroke="red" id="AMP"/>
      <path d="M0 75" fill="none" stroke="red" id="AMP1"/>
      <rect x="0" y="0" width="50" height="50" id="TrO" transform="translate(0 -25)"/>
      <animateMotion id="AM" xlink:href="#TrO" begin="0s" dur="3s" repeatCount="indefinite" fill='freeze'>
        <mpath xlink:href="#AMP"/>
      </animateMotion>
    </g>
  </svg>
  <button>Stop</button>
</div>

Также есть специальный метод endElement(), который останавливает анимацию.

document.querySelector('button').onclick = () => {
  document.querySelector('#AM').endElement();
};
<div class="wrapper">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="border: 0.0625rem solid">
    <g class="main-area">
      <path d="M0 75L300 75" fill="none" stroke="red" id="AMP"/>
      <path d="M0 75" fill="none" stroke="red" id="AMP1"/>
      <rect x="0" y="0" width="50" height="50" id="TrO" transform="translate(0 -25)"/>
      <animateMotion id="AM" xlink:href="#TrO" begin="0s" dur="3s" repeatCount="indefinite" fill='remove'>
        <mpath xlink:href="#AMP"/>
      </animateMotion>
    </g>
  </svg>
  <button>Stop</button>
</div>

2
  • Добрый вечер, в скором времени отвечу, помогло ли в моём случае ваше решение, я с 90% точностью могу сказать что должно помочь, благодарю за ответ 😃
    – Arthur
    3 дек 2018 в 16:35
  • Всё вышло, спасибо за помощь)
    – Arthur
    3 дек 2018 в 20:20
5

Pure SVG

Можно попробовать другой вид анимации, где будет анимироваться атрибут "x" координата ыерхнего левого угла прямоугольника.

<animate id="AM" attributeName="x" values="0;300" begin="play.click" end="stop.click" dur="3s" repeatCount="indefinite">  

В зависимости от поставленной задачи кнопку Play можно убрать.

<div class="wrapper">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="border: 0.0625rem solid">
  
<polyline points="0,75 300,75" stroke="crimson" />
 <g class="main-area">
  <rect x="0" y="50" width="50" height="50" id="TrO" >
   <animate id="AM" 
    attributeName="x" 
    values="0;300"
    begin="play.click" 
    end="stop.click" 
    dur="3s"
    repeatCount="indefinite">
   </animate>
  </rect>
 </g>
   <g id="stop">
     <rect id="btn1" 
      x="240" y="120" 
      width="50" height="20"
      fill="#d3d3d3" 
      stroke="black"/>
	<text x="250" y="135" font-size="16">Stop</text>
   </g>
	<g id="play">
	 <rect id="btn2"
          x="180" y="120"
          width="50" height="20"
          fill="#d3d3d3" 
          stroke="black"/>
	    <text x="190" y="135" font-size="16">Play</text>
	</g>
  
  </svg>
  </div>

Вариант с анимацией animateMotion

<div class="wrapper">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="border: 0.0625rem solid">
    <g class="main-area">
      <path d="M0 75L300 75" fill="none" stroke="red" id="AMP"/>
        <rect id="TrO"
         transform="translate(0 -25)"
          x="0" y="0" 
          width="50"
         height="50" />
      <animateMotion id="AM" 
          xlink:href="#TrO" 
	  begin="play.click" 
	  end="stop.click" 
	  dur="3s" 
	  repeatCount="indefinite">
        <mpath xlink:href="#AMP"/>
      </animateMotion>
    </g>
    
	<g id="stop">
	  <rect id="btn1" 
	   x="240" y="120" 
           width="50" height="20" 
	  fill="#d3d3d3" 
	stroke="black"/>
	<text x="250" y="135" font-size="16">Stop</text>
	</g>
	  <g id="play">
       	<rect id="btn2" 
	      x="180" y="120" 
	      width="50"
              height="20" 
             fill="#d3d3d3"
             stroke="black"/>
	<text x="190" y="135" font-size="16">Play</text>
	</g>
	</svg>

</div> 

Update 9.12.2018

Отформатирован SVG код в стиле CSS правил для более легкого восприятия

2
  • 1
    Все же мощная вещь SVG... Столько примочек у нее..
    – Air
    3 дек 2018 в 6:21
  • 2
    @Air Да oч. интересная эта штука SVG :) а в комплексе с JS+CSS просто фантастика 3 дек 2018 в 6:27

Ваш ответ

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

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