我正在嘗試在 div 上對角繪制一條 SVG 線，如下所示：
我可以在里面創建一個帶有 SVG 線的 div：
<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 的對角線上？
注意：還有這種使用 CSS 剪輯路徑的方法，它在調整大小期間保持固定在其角上，但線的粗細會隨著調整大小而改變。我需要線條粗細保持不變。
uj5u.com熱心網友回復：
不需要 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>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/310800.html
標籤：javascript html css svg