动画没有按照预期的轨迹运动

来源：3-6 d3 入门

慕前端9304100

2023-10-26

目前的整体效果图图片描述
老师您好，期望是左上方1的图标按照2的红色轨迹运动，
在没有添加animateMotion动画前位置如1和2的正确位置，但添加之后轨迹跑到位置3进行运动了
这是什么原因造成的？该如何改造呢？
源码如下：

<template>
  <div class="wr-print-box">
    <svg  width="100%" height="100%" viewBox="0 0 100 200">
      <defs>
        <linearGradient id="print-box-linear-graident">
          <stop offset="0%" stop-color="#1E44B3"></stop>
          <stop offset="100%" stop-color="#00B5FF"></stop>
        </linearGradient>
      </defs>
      <g>
          <path d="M32 40 L37 40 L37 45 L32 45 Z" fill="none" stroke="#808080" stroke-width="0.5" ></path>
          <path d="M33.5 40.5 L35.5 40.5" fill="none" stroke="#ffffff" stroke-width="1" ></path>
          <path d="M33.5 44.5 L35.5 44.5" fill="none" stroke="#ffffff" stroke-width="1" ></path>
          <path d="M32 41 L37 41 L37 44 L32 44 Z" stroke-width="0.5" fill="url(#print-box-linear-graident)" ></path>
        </g>
      <g>
          <path d="M32 40 L37 40 L37 45 L32 45 Z" fill="none" stroke="#808080" stroke-width="0.5" ></path>
          <path d="M33.5 40.5 L35.5 40.5" fill="none" stroke="#ffffff" stroke-width="1" ></path>
          <path d="M33.5 44.5 L35.5 44.5" fill="none" stroke="#ffffff" stroke-width="1" ></path>
          <path d="M32 41 L37 41 L37 44 L32 44 Z" stroke-width="0.5" fill="url(#print-box-linear-graident)" ></path>
          <animateMotion
                dur="1s"
                path="M32 40 L60 40 "
                rotate="auto"
                fill="freeze"
                repeatCount="indefinite"
              />
        </g>
        <path d="M32 40 L61 40" fill="none" stroke="red" stroke-width="0.5"></path>
    </svg>
    
  </div>
</template>

写回答

1回答

扬_灵

2023-10-29

同学你好，这是animateMotion属性导致的，animateMotion中的path决定了方块走动的位置，你可以参考看一下下面这篇文档 http://www.javashuo.com/article/p-wmkdejcn-ew.html ，或者修改path属性为参考代码试下

<g>
<path d="M32 40 L37 40 L37 45 L32 45 Z" fill="none" stroke="#808080" stroke-width="0.5" ></path>
<path d="M33.5 40.5 L35.5 40.5" fill="none" stroke="#ffffff" stroke-width="1" ></path>
<path d="M33.5 44.5 L35.5 44.5" fill="none" stroke="#ffffff" stroke-width="1" ></path>
<path d="M32 41 L37 41 L37 44 L32 44 Z" stroke-width="0.5" fill="url(#print-box-linear-graident)" ></path>
<animateMotion
dur="3s"
path="M0 0 H 10 40"
rotate="auto"
fill="freeze"
repeatCount="indefinite"
/>
</g>

数据可视化入门到精通-打造前端差异化竞争力

同级别前端，掌握数据可视化薪资更高

1527 学习 · 1043 问题

查看课程

相似问题

请问老师关闭动画的逻辑

回答 2

城市订单量滚动排行滚动速度似乎不均匀，滚动速度越来越快,代码如何修订?

回答 1

百度地图轨迹线可以绘制弯道吗？

回答 1

关于 animateTransform 动画不同类型间只生效一个的问题

回答 1

老师，百度地图如何自动缩放动画速度是匀速的？

回答 1

打开慕课网App查看更多内容