Как использовать маски с SVG в документе для маскировки div? ⇐ CSS

[Anonymous]

Я пытаюсь заставить маску покрывать весь содержащий div, размер которого может быть переменным, т. е. он может измениться позже. Мне нужно, чтобы svg сохранял соотношение сторон и располагался в центре содержащего его элемента div.

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

https://codepen.io/FieryRMS/pen/OPLWZWw
Приведенное выше решение не работает, оно не закрывает родительский элемент div и не центрируется. Я ожидал, что произойдет белый круг в центре полностью заполненного черного ящика с красными рамками.
этот вопрос похож на этот, но ответа не было уже 3 года. Я также рассматриваю возможность анимации элемента круга, поэтому использование CSS со встроенным svg не является идеальным.
Я думаю, что эта строка в документации может быть полезна, но я не уверен, как использовать эту информацию. .

Если размер маски содержит или охватывает:

Изображение визуализируется с сохранением его внутренней пропорции при наибольшем размере. содержится внутри или перекрывает область позиционирования маски. Если изображение не имеет внутренней пропорции, оно отображается с размером области позиционирования маски.


Подробнее здесь: https://stackoverflow.com/questions/792 ... o-mask-div