Как создать квадратный div внутри произвольного круга?

Question

Я использую Javascript для создания SVG-элемента, который содержит круг с радиусом и толщиной обводки. Размер и толщина могут отличаться. Я пытаюсь создать квадратный элемент div, который бы поместился внутри этого SVG-круга, чтобы я мог добавить содержимое в круг.

Вы можете представить, что содержимое представляет собой что-либо из текста, содержащего информацию о кружке, привязке или кнопке.

Прямоугольник должен вписываться в круг так, чтобы весь контент был перенесен, а если места нет, контент будет удален.

Вот исходный эскиз

    <!-- A minified example of what the Javascript outputs -->
    <svg viewBox="0 0 80 80" width="80" height="80">
        <circle cx="40" cy="40" r="35"></circle>
    </svg>

Мой главный вопрос: возможно ли добавить это исключительно к элементу SVG и использовать что-то вроде стиля: left: 10%; top: 10%; width:50%; height: 50% или для этого потребуется более продвинутый трюк с CSS или Javascript.

Важно также отметить, что мой круг имеет радиус (svgWidth / 2) * 0.875, который устанавливается из кода Javascript.

Answer 1

Хорошо, благодаря @Sergiu я нашел правильное математическое уравнение для его решения, это была основная проблема.Код ниже взят из моего кода Javascript и показывает, как я создаю rect, который точно соответствует квадрату моего изображения.

        var squareSize = Math.sqrt(2) * radius - circleStrokeThickness;
        var squareCenter = (svgWidth - squareSize) / 2;

        this.rectangleContent = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
        this.rectangleContent.setAttribute('x', squareCenter);
        this.rectangleContent.setAttribute('y', squareCenter);
        this.rectangleContent.setAttribute('width', squareSize);
        this.rectangleContent.setAttribute('height', squareSize);
        this.rectangleContent = $(this.rectangleContent).appendTo(this.svg);

Это не div, но он уже отвечает на все мои вопросы о размещении div.

Answer 2

Я считаю, что это то, что вы ищете.Вы можете изменить размер SVG и посмотреть, как все изменится соответственно.

.container {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container svg {
  fill: #dedede;
  stroke: #000;
  width: 200px;
  height: 200px;
  overflow: visible;
  background-color: lightblue;
  border: 1px solid blue;
}

.container svg g > .text-holder {
  background-color: lightcoral;
}

.container svg g > .text-holder > p {
  font-size: 12px;
}

.container svg g > circle {
  cx: 50%;
  cy: 50%;
  r: 50%;
}

.container svg g > rect {
  stroke: #f00;
  x: 15%;
  y: 15%;
  width: 70%;
  height: 70%;
}

<div class="container">
  <svg viewBox="0 0 80 80">
    <g>
        <circle></circle>
        <rect></rect>
        <foreignObject class="text-holder" x="15%" y="15%" width="70%" height="70%">
          <p xmlns="http://www.w3.org/1999/xhtml" style="font-size: 12px;">Text goes here</p>
        </foreignObject>
    </g>
  </svg>
</div>