Блог

Я пытаюсь нарисовать линию SVG по диагонали через div следующим образом:

Я могу создать 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)
 

Но это не работает. Есть ли способ установить окно просмотра или применить CSS таким образом, чтобы строка SVG всегда оставалась фиксированной по диагонали содержащего ее div?

Примечание: существует также такой подход, который использует CSS clip path, и он остается фиксированным к его углам во время изменения размера, но толщина линии изменяется при изменении ее размера. Мне нужно, чтобы толщина линии оставалась постоянной.

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>