svg - 相对于其中心操作/创建 SVG

Question

我想确定 SVG 的中心，以便轻松操作多个 SVG。

我正在尝试制作基本多边形（3 到 8 边）的多个示例，并很快意识到我要么自己制作，这涉及大量数学，要么我可以从维基百科中提取当前的。前者的问题是从 Sketchup 翻译坐标需要花费大量时间。后者的问题在于它们的方向不同且大小不同。

我知道您可以变换、缩放和旋转 SVG，但我需要知道 SVG 中心的坐标。我怎样才能找到这个，所以我可以设置通用操作？

拿transform="rotate(degrees x y)"，我需要知道中心来完成这个。

JS Fiddle 在这里，我想将所有中心设置为相同，然后将它们缩放到相同的高度和宽度，并可能单独旋转它们，使它们都有一个平底，而不是一个顶点。

Answer 1

你的问题的通用答案并不明显......

对于多边形，尤其是凸多边形，它可能更简单：您可以通过计算路径每个点的 x 和 y 坐标的最大值和最小值来迭代路径并找到它的边界框。

然后您可以确定形状的中心是边界框的中心。

另一种方法是在您估计为中心的位置放置一个不可见元素（对于复杂的形状，“中心”的概念可以是可变的），并获取其坐标以找出中心的位置。特别是用于旋转目的：您可能希望围绕可能不是几何中心的特定点进行此旋转。