我是 SVG 和 Raphael 的新手，但我已经使用 Illustrator 很多年了，所以我对它的工作原理有一些假设。我想组合两条应该返回单个元素的路径。
我需要制作一个语音气泡，但它可以是任何东西。在这种情况下，我尝试制作两个rect，一个带有圆角，另一个是旋转的正方形rect。看起来不错，但是当我尝试移动对话气泡时，由于旋转了 45 度，旋转的元素向错误的方向移动。
如何组合路径，以便以后可以像单个元素/路径一样进行操作？
【问题讨论】：
给你DEMO
var paper = Raphael('canvas',400,400),
r1 = paper.rect(100,100,200,100).attr({fill:'black'}),
r2 = paper.rect(130,130,140,40,5).attr({fill:'white','stroke':'white'}),
r3 = paper.path("M200 170L240 170 220 180z").attr({fill:'white', 'stroke':'white'}),
p = paper.set(r1,r2,r3);
// the rest of the code is in the demo
注意，通过path() 创建三角形更容易，不用担心旋转。
祝你好运；）
【讨论】：
如果您的意思是合并路径，例如使用 Illustrator Pathfinder 面板 - 将多条路径变成一条路径（不是一组路径），合并重叠 - 我很确定没有直接的 Raphael 或 SVG 等价物。
最接近的是，创建一个复合路径（又名复合路径）——相当于 Illustrator 中的 cmd-8 或 Object > Make Compound Path。这会将路径合并为一条路径，但不会删除重叠区域。
基本上，对于一组paper.set( paper.path('M0,0 4,0 0,4z'),paper.path('M9,9 4,9 9,4z') );，等效的复合路径将是paper.path('M0,0 4,0 0,4z M9,9 4,9 9,4z'); - 只需将路径定义合并为一个，每个都以自己的M 开头。
与拉斐尔集的一些差异：
toFront() 更改了集合 within 的顺序，并以每个项目为中心进行变换，就像 Illustrator 的 transform each 一样，除非您为变换提供静态坐标。 JSBIN demo - 比较梯度，看看复合对如何只是 DOM 上的一条路径。
这是一个简单的插件，它增加了获取集合并从中创建复合路径的功能：
Raphael.st.compoundPath = function(){
var positions = [];
this.forEach( function( element ){
positions.push( element.compoundPath() );
});
return positions.join('');
}
Raphael.el.compoundPath = function(){
var path = this.attr('path');
return path ? Raphael.parsePathString( path ).join('') : '';
}
然后像这样使用它：
var someSet = paper.set(paper.path('M0,0 4,0 0,4z'),paper.path('M9,9 4,9 9,4z'));
var compPath = paper.path( someSet.compoundPath() );
someSet.remove(); // if you want to replace the set with a compound path
请注意，它只组合一组路径 - 如果您需要将其他形状与路径组合，您需要先将它们转换为路径。
【讨论】：
首先，您可以将 2 个元素放入 Raphael 集合中，稍后您将使用 Element.transform() 移动该集合。这将让您应用移动处理程序一次，而不是两次。
也针对你的问题，其实是documented:
...还有替代的“绝对”平移、旋转和 scale: T, R 和 S. 他们不会把之前的转换成 帐户。例如，...T100,0 将始终将元素移动 100 像素 水平方向，而 ...t100,0 如果有 r90 则可以垂直移动它 前。只需比较 r90t100,0 和 r90T100,0 的结果。 ...
【讨论】：