如何在多个DIV间创建动态SVG路径？代码失效原因排查

问题根源 #

1. SVG元素未放入SVG容器：直接创建<path>元素并添加到<body>中无法被浏览器渲染，SVG路径必须嵌套在<svg>根元素内才能生效。
2. 坐标系不匹配：.word元素基于#container（position: relative）定位，但原代码将SVG路径直接添加到<body>，导致坐标计算与渲染区域错位。
3. 路径连接逻辑偏差：原代码的路径未按照“前一个元素右端→后一个元素左端”的预期逻辑构建连续折线。

修复后的完整代码 #

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>SVG Path Animation</title>
</head>
<body>
  <div id="container">
    <!-- 新增SVG容器用于承载路径 -->
    <svg id="connecting-svg"></svg>
    <div class="word" id="w1" style="margin-left: 10%; margin-top: 1%;">Premier</div>
    <div class="word" id="w2" style="margin-left: 60%; margin-top: 2%;">Deuxième</div>
    <div class="word" id="w3" style="margin-left: 20%; margin-top: 3%;">Troisième</div>
    <div class="word" id="w4" style="margin-left: 70%; margin-top: 4%;">Quatrième</div>
    <div class="word" id="w5" style="margin-left: 30%; margin-top: 5%;">Cinquième</div>
  </div>
  <script src="script.js"></script>
</body>
</html>

CSS

.word {
    position: absolute;
    font-size: 16px;
}

#container {
    width: 1500px;
    height: 900px;
    position: relative;
}

#connecting-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* 避免SVG遮挡文字交互 */
}

JavaScript

document.addEventListener("DOMContentLoaded", function() {
    const words = [
        document.getElementById("w1"),
        document.getElementById("w2"),
        document.getElementById("w3"),
        document.getElementById("w4"),
        document.getElementById("w5")
    ];
    const svg = document.getElementById("connecting-svg");
    const path = document.createElementNS("http://www.w3.org/2000/svg", "path");

    // 构建路径指令：从第一个元素右端中点开始，依次连接后续元素的左端中点
    let pathD = [];
    const firstWord = words[0];
    pathD.push(`M ${firstWord.offsetLeft + firstWord.offsetWidth},${firstWord.offsetTop + firstWord.offsetHeight / 2}`);
    
    for (let i = 1; i < words.length; i++) {
        const word = words[i];
        pathD.push(`L ${word.offsetLeft},${word.offsetTop + word.offsetHeight / 2}`);
    }

    path.setAttribute("d", pathD.join(" "));
    path.setAttribute("stroke", "black");
    path.setAttribute("stroke-width", "2");
    path.setAttribute("fill", "none");

    svg.appendChild(path);

    // 可选：窗口大小变化时重新计算路径
    window.addEventListener("resize", function() {
        let newPathD = [];
        newPathD.push(`M ${words[0].offsetLeft + words[0].offsetWidth},${words[0].offsetTop + words[0].offsetHeight / 2}`);
        for (let i = 1; i < words.length; i++) {
            const word = words[i];
            newPathD.push(`L ${word.offsetLeft},${word.offsetTop + word.offsetHeight / 2}`);
        }
        path.setAttribute("d", newPathD.join(" "));
    });
});

关键修复说明 #

• 添加SVG容器：将<svg>放入#container内并设置绝对定位、100%宽高，确保其坐标系与.word元素的offset坐标完全匹配。
• 修正路径逻辑：按照“前元素右端中点→后元素左端中点”的规则构建折线，贴合预期连接效果。
• 动态适配（可选）：添加窗口resize监听，确保窗口尺寸变化时路径自动重新计算。

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