尽管有预防性设置，但当宽度大于高度时，SVG 宽高比会保留

Question

我希望蓝线始终连接左上角和右下角而不显示溢出和滚动条。目前只有当宽度小于高度（或多或少）时才会发生，否则它会增加高度，从而导致屏幕溢出并显示滚动条。没有 preserveAspectRatio 选项似乎开箱即用。我正在理想地寻找仅标记解决方案。

<!DOCTYPE html>
<html style="height: 100%;">

<body style="height: 100%; margin: 0;">
    <div
        style="width: 100%; height: 100%; display: grid; grid-template-rows: min-content auto; grid-template-columns: auto;">
        <div style="grid-row: 1; grid-column: 1; border-bottom: 1px solid #ccc;">
            <p style="margin: 5px;">Header</p>
        </div>
        <div style="grid-row: 2; grid-column: 1; display: grid;">
            <svg width="100%" height="100%" viewBox="0 0 1000 1000" preserveAspectRatio="none">
                <polyline points="0,0 1000,1000" stroke="blue" stroke-width="5px" />
            </svg>
        </div>
    </div>
</body>

</html>

编辑：根据 Dave 的出色解释工作示例：

<!DOCTYPE html>
<html style="height: 100%;">

<body style="height: 100%; margin: 0;">
    <div
        style="width: 100%; height: 100%; display: grid; grid-template-rows: min-content minmax(0, 1fr); grid-template-columns: auto;">
        <div style="grid-row: 1; grid-column: 1; border-bottom: 1px solid #ccc;">
            <p style="margin: 5px;">Header</p>
        </div>
        <div style="grid-row: 2; grid-column: 1; display: grid;">
            <svg width="100%" height="100%" viewBox="0 0 1000 1000" preserveAspectRatio="none">
                <polyline points="0,0 1000,1000" stroke="blue" stroke-width="5px" vector-effect="non-scaling-stroke" />
            </svg>
        </div>
    </div>
</body>

</html>

Answer 1

如果我没理解错的话，您希望 svg 改变宽高比，使对角线始终完全可见。

您的 svg 结构正确，可以在使用用户单位绘制的图像上 preserveAspectRatio="none" 执行此操作以进行线和视框匹配。

您的 svg 超出页面高度的原因是因为容器 div 超出了页面高度。

我已将 class 添加到包含 svg 的父级 div 并将其样式设置为具有 100vh 的高度（减去标称像素值以确保滚动条不会显示）。我还给 div 一个边框，这样你就可以看到它现在占据了可视屏幕，并且 SVG 重新显示了从左上角到右下角的线。

在可调整大小的页面上，div 将调整大小并且 svg 将更改纵横比以始终占据它。

.svgFrame {
border: 1px solid red;
width: 100%;
height: calc(100vh - 20px);
}

        <div class="svgFrame" style="grid-row: 2; grid-column: 1; display: grid;">
            <svg width="100%" height="100%" viewBox="0 0 1000 1000" preserveAspectRatio="none">
                <polyline points="0,0 1000,1000" stroke="blue" stroke-width="5px" />
            </svg>
        </div>

关键是限制父级 div，使其完全显示在页面上；在没有约束的情况下，preserveAspectRatio="none" 没有任何效果，因为没有理由更改纵横比。

在这个基于网格布局的示例中，使用 minmax(0, 1fr) 对包含父级 div 的网格进行样式设置达到了预期的效果。

尽管有预防性设置，但当宽度大于高度时，SVG 宽高比会保留

SVG aspect ratio is preserved when width is greater than height despite of the preventive setting

html

svg

resize