rotation - 如何在不裁剪的情况下旋转矩形

Question

我创建了一个 1.5 英寸 x 1.5 英寸的矩形，并在外面添加了一个边框，当我将它旋转 45 度时，角会被裁剪，如下所示。我如何旋转这样的东西而不被裁剪？

我测试了使用 Snap 和 css 旋转这个 SVG 形状。我在两者之间得到了非常不同的结果。使用我正在构建的应用程序，形状可以从 0-359 度旋转。这是它们在 2 之间的形状。使用 Snap 旋转的形状看起来不错，但是当放入 div 并使用 CSS 旋转时，它看起来真的很糟糕。所以我想我需要找出更大的 SVG 区域并将形状放在该区域的中心，唯一的问题是我有大约 80 个不同形状和大小的块。

Answer 1

如果要旋转正方形，请确保要旋转的区域是正方形长度的 1.4 倍。基本上，您希望空间等于形状边界框中最长的对角线（当然，正方形是最简单的）。

在 CSS 中做同样的事情，您已经让浏览器负责为您合成图像，并且您没有元素的显式边界区域。如果你在 SVG 中做这件事，你就有这个限制——所以只要适应它。