javascript - 使用 jQuery 设置动画时偏移元素

Question

我正在制作一个动画页面，其中包含 3 个元素，它们在 svg 线上移动，但我不知道为什么，它们会偏移。我认为这是 jQuery 中的问题，但如何解决这个问题。

有 JSFiddle查询

    $(document).ready(function() {
        // FIRST CIRCLE
        $(".circle-1").animate({left: '0%', top: '0%'}, 5000);
        $(".circle-1").animate({left: '100%', right: '0', top: '50%'}, 5000);
        $(".circle-1").animate({left: '0', right: '0', top: '100%'}, 5000);
        $(".circle-1").animate({left: '100%', right: '0', top: '0'}, 5000);
        $(".circle-1").animate({left: '50%', right: '0', top: '100%'}, 5000);
        // SECOND CIRCLE
        $(".circle-2").animate({left: '50%', right: '0', top: '0%'}, 5000);
        $(".circle-2").animate({left: '100%', right: '0', top: '100%'}, 5000);
        $(".circle-2").animate({left: '0%', right: '0', top: '50%'}, 5000);
        $(".circle-2").animate({left: '100%', right: '0', top: '0%'}, 5000);
        $(".circle-2").animate({left: '0%', right: '0', top: '100%'}, 5000);
        // THIRD CIRCLE
        $(".circle-3").animate({left: '0%', right: '0', top: '0%'}, 5000);
        $(".circle-3").animate({left: '100%', right: '0', top: '50%'}, 5000);
        $(".circle-3").animate({left: '0%', right: '0', top: '100%'}, 5000);
        $(".circle-3").animate({left: '50%', right: '0', top: '0%'}, 5000);
        $(".circle-3").animate({left: '100%', right: '0', top: '100%'}, 5000);
    });

Answer 1

当你说 left它意味着圆的边界矩形的左侧。不是圆心的左边。您需要考虑圆的宽度。例如。圆心是left+width/2 .

我强烈推荐您使用 SVG <animateMotion>可用于沿特定路径为对象设置动画。

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animateMotion

<svg id="svg2" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg"  version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 744.09448819 1052.3622047">
<g id="layer1">
<path id="theMotionPath" style="color-rendering:auto;text-decoration-color:#000000;color:#000000;isolation:auto;mix-blend-mode:normal;shape-rendering:auto;solid-color:#000000;block-progression:tb;text-decoration-line:none;text-decoration-style:solid;image-rendering:auto;white-space:normal;text-indent:0;text-transform:none" d="m471.58 15.998-208.95 112.12-72.99-65.317-17.35 113.79-22.59 12.12-132.16-168.08-0.79 0.612 132.06 167.95-146.61 78.67 119.18 242.64l-18.807 123.33-79.902 32.35 0.375 0.92774 79.352-32.127-35.748 234.45 0.90039 0.36719 136.85-190.29 156.91 319.46 224.67-253.79 120.3 153-12.31-275 53.88-60.86-58.97-52.77-4.92-110.01 45.38-18.38-49.34-69.9-12.42-277.5-92.59 128.74-103.41-146.5zm-0.3 1.299 103.1 146.06-106.66 148.29-204.29-182.82 207.85-111.53zm195.43 19.385 12.22 273.07-103.33-146.39 91.11-126.68zm-476.35 28.097 71.34 63.841-88.3 47.38 16.96-111.22zm72.133 64.551 204.65 183.13-105.16 146.22-194.06-246.8 5.2832-34.65 89.281-47.906zm312.5 34.889 104.03 147.38 3.9082 87.275-81.055 32.816l-133.41-119.38 106.51-148.1zm-402.88 13.609-5.0293 32.98-16.746-21.297 21.775-11.684zm-22.67 12.16 17.43 22.17-45.23 296.61-118.12-240.48 145.92-78.3zm18.279 23.248 193.66 246.29-70.545 98.09-121.11 49.033-47.305-96.309 45.303-297.1zm512.37 99.875 47.713 67.592-43.891 17.77-3.8223-85.361zm-212.2 0.0195 132.95 118.97-197.03 79.77-41.184-52.377 105.27-146.37zm215.08 86.799 4.8672 108.69-85.139-76.188 80.271-32.5zm-81.305 32.918 86.234 77.168 5.0508 112.8l-106.92 120.79-181.57-230.92 197.22-79.85zm-239.65 27.496 40.826 51.92-110.27 44.646 69.447-96.566zm326.93 50.605 57.494 51.449-52.533 59.344-4.9609-110.79zm-566.79 1.1211 46.639 94.951-65.139 26.373 18.5-121.32zm281.34 1.0117 181.86 231.29-223.8 252.81-156.49-318.59 86.414-120.16 112.01-45.35zm-113.75 46.055-85.176 118.44-34.396-70.027 119.57-48.408zm-120.5 48.785 34.664 70.57-135.95 189.03 35.525-232.98 65.758-26.623zm523.78 16.34 12.12 270.86-118.49-150.71 106.37-120.15z" fill-rule="evenodd"/>
</g>





<circle cx="" cy="" r="10" fill="red">

    <!-- Define the motion path animation -->
    <animateMotion dur="30s" repeatCount="indefinite">
      <mpath xlink:href="#theMotionPath"/>
    </animateMotion>
  </circle>


</svg>