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

【问题标题】：How to create a square shaped div inside an arbitrary circle?如何在任意圆内创建方形 div？
【发布时间】：2019-07-28 03:09:10
【问题描述】：

我正在使用 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 代码中设置的。

【问题讨论】：

有什么理由使用 SVG？考虑纯 CSS 用于圆形并从方形构建它并向上移动会更简单
我认为正方形的边必须正好是sqrt(2) * radius。但是仅使用 SVG 无法获得该值。如果可以的话，可以预先计算正方形的大小（可能在 JS 中？甚至是服务器端），或者使用 CSS 和 calc。
我的 Javascript 文件中有半径！所以这不会是一个问题！
我使用 SVG 是因为我可以制作动画。
你可以使用transform: translate(); Css 属性吗？

标签： javascript html css svg

【解决方案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 放置的所有问题。

【讨论】：

【解决方案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>

【讨论】：