Question

我正在制作一个svg动画，其中动画必须跟踪我之前定义的路径，但动画开始时的初始位置似乎会移位到另一个地方，但它仍然跟踪相同的路径但是不同的坐标。我希望动画沿着定义的路径前进。

＆＃13;

<svg width="500" height="500" viewBox="0 0 1000 1000">
  <path id="motionPath" fill="none" stroke="#000000" stroke-miterlimit="10" d="M0,342.8c0,0,138.4-1.5,221.8-50.1c0,0,150.2-87.8,344.6-28.3c16.5,5.1,31.7,9.7,45.5,13.9"/>
  <path id="motion" fill="none" stroke="#000000" stroke-miterlimit="10" class="st0" d="M0,379.8c0,0,154.4-114.9,223.4-71.6s381.4,29.7,388.6-24.3"/>
  
  <g id="car"   transform="translate(0, 0)">
      <path id="note" d="M248.8,306.8c0,0-24-7-28.5,11c0,0-3,16,21,16.5c0,0,19.5,2.3,18.5-28.8s0-61.2,0-61.2s42,9,19,31.5
	c0,0,17-1,13.5-23c0,0-7.5-20-43-22L248.8,306.8z"/>
	<animate attributeType="CSS" attributeName="opacity" from="1" to="0" dur="5s" repeatCount="indefinite" />
</g>

 <g id="car1"   transform="translate(0, 0)">
      <path id="note" d="M248.8,306.8c0,0-24-7-28.5,11c0,0-3,16,21,16.5c0,0,19.5,2.3,18.5-28.8s0-61.2,0-61.2s42,9,19,31.5
	c0,0,17-1,13.5-23c0,0-7.5-20-43-22L248.8,306.8z"/>
	<animate attributeType="CSS" attributeName="opacity" from="1" to="0" dur="5s" repeatCount="indefinite" />
</g>
   


     <animateMotion 
           xlink:href="#car1"
           dur="3s"
          begin="click"
           fill="freeze"
            repeatCount="indefinite"
             >
    <mpath xlink:href="#motion" />
  </animateMotion>


  <animateMotion 
           xlink:href="#car"
           dur="3s"
          begin="click"
           fill="freeze"
            repeatCount="indefinite"
             >
    <mpath xlink:href="#motionPath" />
  </animateMotion>
</svg>

＆＃13;

SVG动画不遵循定义的路径

0 个答案: