如何在DIV容器内绘制随容器缩放始终贴合对角、线宽恒定的SVG直线

问题原因 #

你的原始方案失效有两个核心问题：

1. getBoundingClientRect获取的是div相对于浏览器视口的绝对坐标，而SVG内部的坐标是相对于自身画布的，二者坐标系不匹配，赋值后自然无法正常显示。
2. 你将x1/y1等line元素的属性赋值给了SVG容器本身，属性挂载对象错误。

最优解决方案（纯SVG+CSS，无需JS，线宽恒定） #

直接利用SVG自身特性即可实现，无需额外JS逻辑，div缩放时自动贴合对角，线宽保持固定：

<div id="my_div" class="rectangle">
  <svg width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none">
    <line x1="0" y1="0" x2="1" y2="1" stroke="red" stroke-width="2" vector-effect="non-scaling-stroke"/>
  </svg>
</div>

属性说明：

• viewBox="0 0 1 1" 将SVG画布坐标范围限定为左上角(0,0)、右下角(1,1)，刚好和SVG容器的四个角对应
• preserveAspectRatio="none" 允许SVG随外层div拉伸时，坐标比例同步适配，保证直线始终连接两个对角
• vector-effect="non-scaling-stroke" 强制线宽不随SVG缩放变化，始终保持你设置的2px，完美解决线宽恒定的需求

可选JS修正方案 #

如果你需要用JS实现，可以用ResizeObserver监听div尺寸变化，修改line元素的属性即可：

const targetDiv = document.getElementById('my_div');
const diagonalLine = targetDiv.querySelector('line');

function updateDiagonal() {
  const divWidth = targetDiv.clientWidth;
  const divHeight = targetDiv.clientHeight;
  diagonalLine.setAttribute('x1', 0);
  diagonalLine.setAttribute('y1', 0);
  diagonalLine.setAttribute('x2', divWidth);
  diagonalLine.setAttribute('y2', divHeight);
}

// 初始化执行
updateDiagonal();
// 监听div尺寸变化自动更新
const observer = new ResizeObserver(updateDiagonal);
observer.observe(targetDiv);

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