当 div 大小提前未知时，使用 CSS 网格布局将 div 与 svg 重叠

Question

我有一个div：

• 它有宽度，但提前不知道
• 它可能有也可能没有设置高度
• 未设置高度时，它应该垂直扩展以匹配内容。

我想用 SVG 覆盖该 div：

• SVG 有一个方形视图框
• SVG 应该恰好占据 div 的大小。

我知道这可以使用位置来完成：相对/绝对。不过，我正在尝试使用 CSS 网格布局来实现这一点。

这是我的代码：

<div id="wrapper">
    <div id="d1" style="width: 20em;">
        <p>Some content here.</p>
        <p>Some content here.</p>
    </div>
    <svg id="overlay" viewBox="0 0 3 3" preserveAspectRatio="none">
        <rect width="100%" height="100%" fill="purple" opacity="0.5" />
    </svg>
</div>

#wrapper {
    display: grid;
    width: fit-content;
    height: fit-content;
}

#d1 {
    grid-area: 1 / 1;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    border: 5px solid black;
}

#overlay {
    grid-area: 1 / 1;
    width: 100%;
    height: 100%;
}

https://jsfiddle.net/w2mucxvL/

问题是：浏览器似乎忽略了

preserveAspectRatio="none"

，这导致 SVG 是正方形的（而不是

#d1

的大小，它不是正方形）。我错过了什么？

Answer 1

因为使用

viewBox="0 0 3 3"

，svg 有自己的默认正方形长宽比大小。因此网格也考虑了 SVG 的尺寸。

对于叠加层，您可以制作 SVG

position: absolute

，这样它的尺寸将被其父级

#wrapper

忽略。

与将

position: relative

设置为

#wrapper

一起，SVG 将仅正确覆盖

#wrapper

的大小。

#wrapper {
    display: grid;
    width: fit-content;
    height: fit-content;
    /* added */
    position: relative;
}

#d1 {
    grid-area: 1 / 1;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    border: 5px solid black;
}

#overlay {
    grid-area: 1 / 1;
    width: 100%;
    height: 100%;
    /* added */
    position: absolute;
}

<div id="wrapper">
    <div id="d1" style="width: 20em;">
        <p>Some content here.</p>
        <p>Some content here.</p>
    </div>
    <svg id="overlay" viewBox="0 0 3 3" preserveAspectRatio="none">
        <rect width="100%" height="100%" fill="purple" opacity="0.5" />
    </svg>
</div>