围绕各自的轴镜像SVG元素

我希望以编程方式就地镜像任意SVG元素。这意味着他们应该保持目前的地位，但得到镜像

我知道我可以使用

scale（1，-1）

镜像元素，然后对它们进行转换。 但问题是：我如何知道翻译的数量

我想我可以通过加上元素的高度和元素到0轴距离的两倍来计算数量

例如，这适用于以下情况：

<polyline id="line1" stroke="green" stroke-width="1" fill="none"
          points="
                  10, 10           
                  20, 10    20, 20    30, 20    30, 10
                  40, 10    40, 30    50, 30    50, 10
                  60, 10    60, 40    70, 40    70, 10
                  80, 10    80, 50    90, 50    90, 10
                 100, 10   100, 60   110, 60   110, 10
                 "
          transform="scale(1, -1) translate(0, -70)"
/>                                 

元素的高度为50，到0轴的距离为10，因此距离为

50+2*10=70

但是，这意味着计算会因图元类型（直线、多段线、矩形、g）以及对象是否已平移而有所不同

---

是否有一种通用的方法来镜像SVG元素？

显然，您必须应用的转换操作将取决于您指出的所有这些因素。没有一种简单的“通用”方法可以在每个实例中都有效。你需要根据具体情况来解决这个问题

---

getBBox（）

方法在应用任何

transform

属性后给出元素的边界框。由此，您可以确定反射轴（即中心轴），从而确定所需的变换操作。

这种情况仅适用于“围绕点缩放”问题的另一个应用程序（也与围绕点旋转相同）。正如@BigBadaboom指出的，您需要使用元素的边界框。从这里开始，您需要执行三个步骤：

首先移动/平移对象，使要缩放对象的点位于原点（（0,0））

二是规模,

第三步：通过第一步的负向量将其移回/平移

通过将上述步骤1到步骤3中的所有矩阵相乘，可以预先计算需要应用的变换矩阵

请注意，

getBBox（）

将提供局部坐标中的边界框，因此，如果元素位于已应用转换的组中，则坐标相对于该组

getBoundingClientRect（）

将以绝对坐标传递值

这很重要，因为您需要决定是在绝对空间还是局部空间中执行计算。即使使用局部空间很有诱惑力，但使用绝对空间也很常见，因为它对每个元素都有效，即使它在DOM中嵌套得很深，并且已经应用了一系列转换

getTransformToElement（）

将是您计算任何元素的绝对转换的朋友

因此，如果计算绝对空间中元素所需的变换，只需对该变换应用»基础变化«，将其带回局部空间

所有这些仿射变换乍一看可能有点复杂，但值得了解其背后的数学知识，一旦学会了缩放、旋转、剪切和链式变换（也包括环绕点），就不再是问题了

祝你好运