Question

如果我将（100,0）的转换应用于SVG路径，则向左移动100px。但是，如果我首先旋转路径，则沿着对角线进行平移。

我理解为什么会发生这种情况 - 旋转轴旋转，从而使沿x轴的平移不再是水平的。但是，有时候，当我不希望这样做时，我希望对前一个的结果应用转换，而不是让它受到影响或影响那些先前的转换。

我知道一种解决方案是将转换后的路径放在一个组元素中，然后将第二个转换应用于该组。但是我想尽可能避免创建组元素。在调查这个问题时，我遇到了Flatten.js，其中＆＃34;变平了＃34;转换。换句话说，它修改元素的原始路径，以使其等效于转换。但是，这似乎只适用于整个svg元素，而不是其中的单个路径。

我目前正在与Snap.svg合作以防万一。我虽然无法找到与此相关的文档中的任何内容。

为了澄清我想要完成的任务，请看看这三个例子：

Square simply rotated

Rotate square, translate square 方形旋转，然后沿x轴平移50.但由于x轴现在已经旋转，因此方形实际上也沿对角方向向下移动。这就是问题所在。

Rotate Square, put in group, translate group 通过将正方形放入一个组中，然后在组元素上应用平移，该正方形纯粹在水平方向上移动。这就是我想要实现的目标，但无需将方块放在一个组中。

Answer 1

只需颠倒转换操作的顺序

matrix.translate(50,0).rotate(45, bounds.cx, bounds.cy);

Answer 2

Snap.svg的答案确实在文档中：Snap.path.map

我这样使用它：

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

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

将上面的代码放入一个带有单个参数的函数 - 原始形状：

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

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

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可让您决定是否应在流程中丢弃原始形状，只留下转化烘焙的克隆。

将转换应用于SVG路径上的先前转换结果

2 个答案: