如何使用JS调整SVG父元素坐标使其与内部线条一致？

核心问题拆解 #

你遇到的两个关键问题：

1. top/left不生效：SVG默认是inline元素，直接用setAttribute('position', 'relative')是错误的——position是CSS属性，不是SVG原生属性，且relative定位仅相对于元素自身文档流位置偏移，无法精确控制页面位置。
2. viewBox使用错误：viewBox="50 50 200 200"的含义是将SVG内部(50,50)到(250,250)的区域映射到SVG容器，导致你的线条起点(50,50)被对齐到SVG容器左上角，所以看起来线条跑到了页面(0,0)位置。

解决方案代码与说明 #

方案1：让SVG容器精确包裹线条，且线条坐标与页面坐标对齐

这个方案会让SVG刚好包裹你的线条，同时通过CSS定位让线条起点与页面指定位置对齐：

function createEdge(){
    var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
    var svgLine = document.createElementNS("http://www.w3.org/2000/svg", "line");

    // 设置线条坐标
    svgLine.setAttribute('x1', '50');
    svgLine.setAttribute('y1', '50');
    svgLine.setAttribute('x2', '200');
    svgLine.setAttribute('y2', '200');
    svgLine.setAttribute('stroke', 'blue');
    
    // 正确设置CSS定位，让top/left生效
    svg.style.position = 'absolute';
    svg.style.left = '50px'; // SVG容器在页面的左偏移
    svg.style.top = '50px';  // SVG容器在页面的上偏移

    svg.appendChild(svgLine);
    document.body.appendChild(svg);

    // 获取线条的边界盒
    var bbox = svgLine.getBBox();
    // 设置viewBox让SVG视口与线条边界完全对齐
    svg.setAttribute("viewBox", `${bbox.x} ${bbox.y} ${bbox.width} ${bbox.height}`);
    // 设置SVG显示宽高与视口一致，避免线条缩放
    svg.setAttribute("width", `${bbox.width}px`);
    svg.setAttribute("height", `${bbox.height}px`);
}

效果：线条起点(50,50)会精确对应页面的(50+0,50+0)位置，实现SVG容器与内部线条坐标的匹配。

方案2：保持线条在SVG内部的原始坐标，同时控制SVG页面位置

如果你想让线条在SVG内部的坐标就是你设置的(50,50)到(200,200)，可以这样写：

function createEdge(){
    var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
    var svgLine = document.createElementNS("http://www.w3.org/2000/svg", "line");

    svgLine.setAttribute('x1', '50');
    svgLine.setAttribute('y1', '50');
    svgLine.setAttribute('x2', '200');
    svgLine.setAttribute('y2', '200');
    svgLine.setAttribute('stroke', 'blue');
    
    // 固定SVG在页面的位置
    svg.style.position = 'absolute';
    svg.style.left = '0px';
    svg.style.top = '0px';

    svg.appendChild(svgLine);
    document.body.appendChild(svg);

    // 设置viewBox覆盖线条的全部坐标范围
    svg.setAttribute("viewBox", "0 0 200 200");
    svg.setAttribute("width", "200px");
    svg.setAttribute("height", "200px");
}

效果：线条在SVG内部保持(50,50)的原始坐标，同时因为SVG定位在页面(0,0)，线条起点会直接对应页面的(50,50)位置。

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