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

Question

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

您可以将内容想象成包含有关圆圈、 anchor 或按钮的信息的文本。

矩形必须适合圆圈，这样所有内容都被包裹起来，如果没有空间，内容将被移除。

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%;前10名％;宽度:50%；高度: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 位置的所有问题。