用圆形SVG画菱形

Question

我有多个<g>元素，并且所有元素都有一个圆圈：

<g class="my-group">
    <circle r="40" cx="10" cy="10"></circle>
</g>

在某些情况下，我需要绘制一个{strong> 圆角 而不是rectange的圆角circle，它应该显示为菱形。我正在尝试像这样绘制它：

<g class="my-group">
    <rect x="-16" y="-30" width="60" height="60" fill="red" transform="rotate(45)" rx="4"></rect>
</g>

但这是对coordinates和width / height的rect进行硬编码的错误方法。

我如何计算旋转矩形的width和height使其圆内接，所以组将具有相同的宽度和高度80px。

Answer 1

简单的勾股定理。矩形宽度（或斜边）等于两个半径平方的平方根。

const radius = document.querySelector('#circle').getAttribute('r')
const rectWidth = Math.sqrt(radius * radius * 2)
const square = document.querySelector('#square')

square.setAttribute('x', -rectWidth/2 + 'px')
square.setAttribute('y', -rectWidth/2 + 'px')
square.setAttribute('width', rectWidth + 'px')
square.setAttribute('height', rectWidth + 'px')

svg {
  width: 100vmin;
  height: 100vmin;
}

<svg viewbox="0 0 100 100">
    <circle id="circle" fill="green" r="40" cx="50" cy="50"></circle>
    <rect id="square" fill="red" transform="translate(50, 50) rotate(45)"></rect></svg>