Estoy tratando de dibujar una línea SVG en diagonal a través de un div como este:

Puedo crear un div con una línea SVG dentro:

 <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>

Dado que puedo cambiar el tamaño del div del rectángulo que lo contiene, necesito que la línea SVG se mueva con el div del rectángulo a medida que cambia de tamaño, siempre tocando las esquinas superior izquierda e inferior derecha.

Intento usar getBoundingClientRect para establecer las posiciones de línea:

 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)

Pero esto no funciona. ¿Hay alguna manera de configurar viewBox o aplicar CSS, de modo que la línea SVG siempre permanezca fija en la diagonal de su div contenedor?

Nota : también existe este enfoque que usa la ruta de recorte CSS, y permanece fijo en sus esquinas durante el cambio de tamaño, pero el grosor de la línea cambia a medida que se cambia el tamaño. Necesito que el grosor de la línea permanezca constante.