在包含 DIV 的对角线上绘制一条 SVG 线（并保持 DIV 调整大小）

Question

我正在尝试像这样在 div 对角线上绘制一条 SVG 线：

我可以创建一个 div，里面有一条 SVG 线：

<div id="my_div" class="rectangle">
    <svg id="my_line" width='100%' height='100%' viewBox='0 0 2000 2000' preserveAspectRatio='none'><line style='red; stroke-width:2' /></svg>
</div>

因为我可以调整包含矩形 div 的大小，所以我需要 SVG 线在和矩形 div 调整大小时移动，始终触摸左上角和右下角。

我尝试使用 getBoundingClientRect 来设置线条位置：

var rect_box = document.getElementById("my_div").getBoundingClientRect();

$("#my_line").attr("x1", rect_box.left)
$("#my_line").attr("y1", rect_box.top)
$("#my_line").attr("x2", rect_box.right)
$("#my_line").attr("y2", rect_box.bottom)

但这不起作用。有没有办法设置 viewBox，或应用 CSS，使 SVG 线始终在其包含的 div?

的对角线上保持固定

注意：还有this的方法是使用CSS裁剪路径，在调整大小时它的角仍然固定，但是厚度行随着调整大小时而变化。我需要线条粗细保持不变。

Answer 1

不需要 javascript。

#my_div {
  outline: 1px solid;
  height: 200px;
}

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

在包含 DIV 的对角线上绘制一条 SVG 线（并保持 DIV 调整大小）

Drawing an SVG line diagonally across its containing DIV (and maintaining as DIV resized)

html

javascript

css

svg