主页 / 问题 / 914678
Accepted
Arthur
Asked:2020-12-03 04:41:09 +0000 UTC2020-12-03 04:41:09 +0000 UTC

将对象返回到其先前位置 SVG

  • 772

我有一个我正在制作动画的对象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>

javascript

2 个回答

  1. Best Answer

    当然，这不是最好的选择，但它确实发挥了作用。

    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>

    • 6

  2. 纯 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>

    更新 9.12.2018

    以 CSS 规则样式格式化 SVG 代码，以便于感知

    • 5

相关问题