将转换应用于SVG路径上的先前转换结果 [英] Apply transformation to result of previous transformation on SVG path

问题描述

如果我将(100，0)的转换应用于SVG路径，它将向左移动100px.但是，如果我先旋转路径，则平移会沿着对角线进行.

If I apply a translation of (100, 0) to an SVG path, it shifts left by 100px. But if I first rotate the path, then the translation happens along a diagonal.

我理解为什么会发生这种情况-旋转使轴旋转，从而使沿x轴的平移不再水平.但是有时候，当这不是我们所希望的时，我想将转换应用于上一个转换的结果，而不是使其受到或影响那些先前转换的结果.

I understand why this happens -- the rotation has rotated the axes, thus making the translation along the x axis no longer horizontal. There are times, however, when this isn't desirable, when I'd like to apply a transformation to the result of a previous one rather than having it be affected by or affect those previous ones as well.

我知道一种解决方案是将转换后的路径放入组元素中，然后将第二种转换应用于该组.但是，我想避免在可能的情况下创建group元素.在研究此问题时，我遇到了 Flatten.js ，它简化"了转换.换句话说，它修改元素的原始路径以使其等效于转换.但是，这似乎仅适用于整个svg元素，而不适用于其中的单个路径.

I know one solution is to put the transformed path in a group element, and then apply the second transformation to that group. But I'd like to avoid the need to create the group element if possible. In looking into this issue, I came across Flatten.js, which "flattens" transformations. In other words, it modifies the original path of the element in order to make it equivalent to the transformation. However, this seems to only work on an entire svg element, rather than individual paths within it.

我目前正在与 Snap.svg 合作.不过，我无法在文档中找到任何与此相关的内容.

I'm currently working with Snap.svg in case that matters. I haven't been able to locate anything in the docs that seems relevant to this though.

要弄清楚我要完成的工作，请看以下三个示例:

To clarify what I'm trying to accomplish, take a look at these three examples:

方形简单旋转

旋转正方形，翻译正方形 旋转正方形，然后沿x轴平移50.但是由于x轴现在已经旋转，所以正方形实际上也沿对角线向下移动.这是问题所在.

Rotate square, translate square Square rotated, then translated along the x axis by 50. But since the x axis has now been rotated, the square actually shifts diagonally down as well. This is the problem.

旋转正方形，放在组中，翻译组 通过将正方形放到一个组中，然后在组元素上应用平移，正方形将完全在水平方向上移动.这是我想要实现的目标，但不必将正方形放在一个组中.

Rotate Square, put in group, translate group By putting the square into a group, and then applying the translation on the group element, the square shifts purely in a horizontal direction. This is what I want to achieve, but without having to put the square in a group.

推荐答案

Snap.svg的答案确实存在于文档中:

The answer for Snap.svg was indeed in the docs: Snap.path.map

我正在这样使用它:

    var new_shape = original_shape.paper.path(
        Snap.path.map(
            original_shape.realPath.toString(),
            original_shape.transform().localMatrix
        )
        .toString()
    );

这将创建原始形状的克隆，但使用path元素并将所有命令都转换为C.

This will create a clone of the original shape, but using a path element with all commands turned into C.

将上述代码放入带有单个参数的函数中-原始形状:

Put the above code into a function that takes a single argument -- the original shape:

function bakeMatrix(){
    var new_shape = original_shape.paper.path(
        Snap.path.map(
            original_shape.realPath.toString(),
            original_shape.transform().localMatrix
        )
        .toString()
    );
}

或者更好的是，创建一个Snap.svg插件:

Or, better yet, create a Snap.svg plugin:

Element.prototype.bakeMatrix = function(replace){

    var shape = this.paper.path(
        Snap.path.map(
            this.realPath.toString(),
            this.transform().localMatrix
        )
        .toString()
    );

    if (replace) this.remove();
    return shape;
};

有了该插件，我可以简单地调用shape.bakeMatrix()并获得形状的克隆，所有转换都烘焙到路径中.附加参数replace使您可以决定是否应在处理过程中放弃原始形状，只保留转换烘焙的克隆.

With that plugin, I can call simply shape.bakeMatrix() and get a clone of the shape, all transformations baked into the path. The additional parameter replace lets you decide whether the original shape should be discarded in the process, leaving just the transformation-baked clone.

这篇关于将转换应用于SVG路径上的先前转换结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！