如何在任意圆内创建方形div？

Question

我正在使用Javascript创建一个SVG元素，其中包含一个半径和笔触粗细的圆。大小和厚度可能会有所不同。我正在尝试创建一个适合该SVG圆内部的方形div，以便可以在圆内添加内容。

您可以想象内容是包含有关圆，锚点或按钮的信息的文本中的任何内容。

矩形必须适合圆形，以便包裹所有内容，如果没有空间，则内容将被删除。

Here is the raw Sketch

    <!-- 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>