Question

我想以编程方式镜像任意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元素？

Answer 1

显然，您必须应用的转换操作取决于您指出的所有因素。没有简单的“通用”方法可以在每个实例中使用。您需要根据具体情况进行处理。

{/ 1}}方法在应用任何getBBox()属性之后给出元素的边界框。由此可以确定反射轴（即中心轴），从而确定所需的变换操作。

Answer 2

这种情况只是“Scale Around Point”问题的另一个应用（与围绕点旋转相同）。正如@BigBadaboom指出的那样，你需要使用元素的边界框。从那里你需要做三个步骤：

首先移动/翻译对象，使得您想要缩放对象的点位于原点（（0,0）），

第二：规模，

第三步：通过第一步的负向量移动/翻译它。

您可以通过将上述第一步到第三步的所有矩阵相乘来预先计算您需要应用的变换矩阵。

请注意getBBox()将为您提供本地坐标中的边界框，因此如果元素位于已应用变换的组中，则坐标相对于该组。

getBoundingClientRect()将以绝对坐标传递值。

这很重要，因为您需要决定是在绝对空间还是在本地空间中执行计算。即使使用局部空间很有诱惑力，我也常常使用绝对空间，因为它适用于每个元素，即使它已经深深嵌套在DOM中，并且已经应用了一堆变换。

getTransformToElement()将是你的朋友，可以计算任何元素的绝对转换。

因此，如果您在绝对空间中计算元素所需的变换，则只需在此变换中应用“基础更改”，将其重新置于局部空间中。

所有这些仿射变换乍一看可能看起来有点复杂，但是一旦学会了刻度，旋转，剪切和链式变换（周围点也不再是问题），它的数学背后是值得的。

祝你好运！

围绕自己的轴镜像SVG元素

2 个答案: