Anime.js无法识别SVG路径，Div无法沿路径移动问题求助

我帮你排查了代码里的几个关键问题，调整后就能让div正常沿路径移动了：

问题分析 #

1. SVG未设置尺寸与视口：你的SVG没有指定width、height和viewBox属性，浏览器会使用默认的小尺寸（通常300x150px），而且路径的坐标是基于SVG内部的，和页面上div的绝对定位坐标系不匹配，导致div移动的区域不在可视范围内。
2. CSS选择器重复定义：你同时给div和.green设置了相同的绝对定位样式，可能造成样式优先级冲突，建议统一用类选择器控制目标元素。

修正后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            background: grey;
            margin: 0; /* 去掉默认边距，避免布局偏移 */
        }

        .container {
            position: relative; /* 让div相对于这个容器定位，和SVG同坐标系 */
            width: 256px; /* 匹配路径的最大宽度248+8 */
            height: 100px; /* 匹配路径的最大高度96+4 */
            margin: 20px auto;
        }

        svg {
            width: 100%;
            height: 100%;
            viewBox: 0 0 256 100; /* 让SVG视口覆盖路径的所有坐标，确保路径完整显示 */
        }

        .green {
            position: absolute;
            background: green;
            width: 1rem;
            height: 1rem;
            margin: -0.5rem; /* 让div的中心对齐路径上的点，移动更准确 */
        }
    </style>
</head>
<body>
    <div class="container">
        <svg>
            <path fill="#000" stroke="#000" d="M8,56 C8,33.90861 25.90861,16 48,16 C70.09139,16 88,33.90861 88,56 C88,78.09139 105.90861,92 128,92 C150.09139,92 160,72 160,56 C160,40 148,24 128,24 C108,24 96,40 96,56 C96,72 105.90861,92 128,92 C154,93 168,78 168,56 C168,33.90861 185.90861,16 208,16 C230.09139,16 248,33.90861 248,56 C248,78.09139 230.09139,96 208,96 L48,96 C25.90861,96 8,78.09139 8,56 Z" />
        </svg>
        <div class="green"></div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.js"></script>
    <script>
        window.onload = () => {
            var path = anime.path("path");
            anime({
                targets: ".green", // 用类选择器精准定位目标div
                translateX: path,
                translateY: path,
                rotate: path,
                duration: 3000,
                loop: true,
                easing: "linear",
            });
            anime({
                targets: "path",
                opacity: 0,
                duration: 6000,
                loop: true,
                direction: "alternate",
                easing: "easeInOutExpo",
            });
        }
    </script>
</body>
</html>

关键调整点说明 #

• SVG视口设置：给SVG添加viewBox="0 0 256 100"，确保路径的所有坐标都在SVG可视范围内，同时设置width:100%和height:100%让SVG自适应容器尺寸。
• 容器相对定位：新增.container容器并设置position:relative，让div的绝对定位基于这个容器，和SVG的坐标系保持一致，这样div的移动路径就能和SVG路径对应上。
• div居中对齐：给.green添加margin:-0.5rem，让div的中心对齐路径上的每个点，移动时视觉效果更准确。
• 精准选择目标元素：动画目标从div改为.green，避免影响页面上其他可能存在的div元素。

这样调整后，绿色小方块就能沿着SVG路径正常循环移动了，同时路径的淡入淡出动画也能正常工作。

内容的提问来源于stack exchange，提问作者karjedavpalaa