如何旋转矩形而不进行裁剪

Question

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

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

Answer 1

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

在CSS中做同样的事情，你已经让浏览器负责为你合成图像，而你没有明确的元素边界区域。如果你在SVG中做这件事，你就有了这个限制 - 所以只是容纳它。