时间戳

首页 > 解决方案 > 用圆形SVG绘制一组内接的菱形

javascript - 用圆形SVG绘制一组内接的菱形

问题描述

我有多个<g>元素，它们都有一个圆圈：

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

在某些情况下，我需要绘制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的错误方法。

我如何计算width和height旋转矩形以将其内接成圆形，因此 group 将具有相同的 width 和 height 80px。在此处输入图像描述

标签： javascriptd3.jssvg

解决方案

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

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>

推荐阅读