Как сделать фоновое переполнение (in: before) видимым

Question

Я хочу круг с динамическим содержанием.Я использую фоновое изображение (SVG) и масштабирую его так, чтобы оно всегда было позади контента.Это почти работает.Фон масштабируется, но переполнение не видно.Таким образом, левое и правое переполнение или верх и низ в зависимости от ширины экрана не видны.

.icwrap {
    position: absolute;
    top: 50%;
    left: 50%;
    overflow: visible;
    display: flex;
    transform: translate(-50%, -50%);}

.iccont {
    text-align: center;
    position: relative;
    display: table-cell;
    overflow: visible;
    width: 45vw;
    padding: 7.5vw;
    height: auto;
    color: #FFF;}

.iccont h1 {
   font-size: 1.5em;
   font-weight: 700;
   margin-bottom: 0px;
   line-height: 1.5em;}

.iccont p {
   line-height: 1.5em;}

.icwrap:before {
   content: '';
   width: 100%;
   height: 100%;
   min-height: 100%;
   display: block;
   position: absolute;
   left: 50%;
   top: 50%;
   overflow: visible;
   transform: translate(-50%, -50%);
   background-position: center;
   background-image: url(https://upload.wikimedia.org/wikipedia/commons/0/01/SVG_Circle.svg);
   background-repeat: no-repeat;
   background-size: cover;}

См. Мой код, как описано выше: https://jsfiddle.net/g471tLzf/

Мне нравитсяповедение.Есть ли решение для отображения переполнения?

Answer 1

Прямоугольник, который можно вписать в круг, имеет максимальную площадь, представляющую собой квадрат с радиусом / шириной (2) ширины.

Проверьте видео, если вы заинтересованы в основной математике. https://www.youtube.com/watch?v=wNMK92GVTO8.

Таким образом, вы не можете решить эту проблему в целом, если ваш контент не помещается в каждом случае внутри этого поля.