Наложение div на svg с использованием макета сетки CSS, когда размер div заранее неизвестен ⇐ CSS

[Anonymous]

У меня есть div:

• у него есть ширина, но она заранее не известна
• он может быть установлена ​​или не установлена ​​высота.
• если высота не установлена, она должна расширяться по вертикали в соответствии с содержимым.

Я хочу наложить этот div на SVG:

• SVG имеет квадратное поле просмотра
• SVG должен занимать точно такой же размер, как и элемент div.

Я знаю, что это можно сделать используя позицию: относительную/абсолютную. Однако для этого я пытаюсь использовать сетку CSS.
Вот код, который у меня есть:

Код: Выделить всё

Some content here.
Some content here.

Код: Выделить всё

#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/
[img]https://i .sstatic.net/7A1qHSze.png[/img]

Проблема в том, что браузеры игнорируют saveAspectRatio="none", из-за чего SVG становится квадратным (вместо этого размером #d1, который не является квадратным). Что мне не хватает?

Подробнее здесь: https://stackoverflow.com/questions/792 ... known-ahea