Javascript 如何从SVG路径的交点中找到新的路径（形状）？

我需要将两条SVG路径相交，并获得与它们相交的路径。

它应该在浏览器或Node.js中工作（任意一个，而不是两个）。
我需要交叉点，不能使用

剪辑路径。

如果由于某种原因交叉点将使用
transform
它就可以了（我将自己删除它）

我想那里有一个图书馆，但我只找到了一个


-返回点数组，但我需要
path
-无法使其工作-由于某种原因，它总是返回空数组
-似乎提供了一些有用的东西，但我不知道如何使用它

喜欢


例如，与以下路径相交：

M 24.379464,51.504463 23.434524,23.156249 38.742559,12.572916 c 0,0 29.860118,-9.0714281 17.00893,0.755953 -12.851191,9.82738 13.229166,19.465774 13.229166,19.465774 z
m 32.883928,0.28869028 c 0,0 -15.686011,1.51190452 -8.504463,7.18154712 7.181546,5.6696426 50.270836,30.0491076 26.458332,42.3333336 -23.8125,12.284226 47.058036,14.174107 47.058036,14.174107 z

我想得到这样的东西：

M 43.943359 11.123047 C 40.995759 11.900151 38.742188 12.572266 38.742188 12.572266 L 35.236328 14.996094 C 44.091432999999995 21.21816 55.052161 29.822765 57.455078 37.628906 L 66.939453 33.650391 63.632812 30.410156 C 58.77426 27.95814 52.364322 23.85552 52.214844 19.224609 L 43.943359 11.123047 z

下面是示例中带有
path
s的交互式代码片段（忽略颜色-为了清晰起见）-需要从
#path1
和
#path2
获取交集：


svg{宽度：10em；宽度：100vmin；轮廓：1px点蓝色；显示：无；}
输入{显示：无；}
标签{宽度：10em；浮动：左；清除：左；光标：指针；线宽：2em；边距：0.5em.25em 0；填充：0.25em；边框：1px实心；}
：选中+*+*+标签{背景：仿古白色；颜色：蓝色；}
：选中+*++*++*++*+svg{display:inline block；}

输入
交叉
夹子
Snap.svg似乎具备完成此任务所需的基本功能。他们中的一些人可能会有点为难，但这可能是前进的方向。请将此视为伪代码，而不是按原样工作：

// returns something like [ [ "M", 1, 2 ], ["C", 3, 4, 5, 6, 7, 8 ], ... ]
// and has a custom .toString() method
segList1 = Snap.path.toCubic(p1)
segList2 = Snap.path.toCubic(p2)

intersections = Snap.path.intersection(p1, p2)

// handle the subpaths between neighbouring intersections
intersectionPaths = intersections.map((point, id) => {
    from = point
    to = intersections[id + 1 < intersections.length ? id + 1 : 0]
    return pathBetweenIntersections(from, to)
})

// return the two paths between two neighbouring intersection points
function pathBetweenIntersections (from, to) {
    // list the segments between the intersection points on first path
    // TODO: handle cases when from.segment1 >= to.segment1
    subSegList1 = segList1.slice(from.segment1 + 1, to.segment1)

    // first segment has the intersection point
    startSegments = [ from.bez1.slice(0, 2).unshift('M'), from.bez1.slice(2, 8).unshift('C') ]
    startString1 = Snap.path.toCubic(startSegments).toString()
    // construct a path element from the segment
    startPath1 = Paper.path(startString1)
    startPathLength1 = startPath1.getTotalLength()
    // get the relevant subpath from intersection point to end
    startPathString1 = startPath1.getSubpath(from.t1 * startPathLength1, startPathLength1)
    subSegList1 = Snap.path.toCubic(startPathString1).concat(subSegList1)

    // and the same for the last segment
    endSegments = [ to.bez1.slice(0, 2).unshift('M'), to.bez1.slice(2, 8).unshift('C') ]
    endString1 = Snap.path.toCubic(endSegments).toString()
    endPath1 = Paper.path(endString1)
    endPathLength1 = endPath1.getTotalLength()
    endPathString1 = endPath1.getSubpath(0, to.t1 * endPathString1)
    subSegList1.push(Snap.path.toCubic(endPathString1)[1])

    subSegList2 = // do the same for segList2

    return {
        p1: Snap.path.toCubic(subSegList1).toString(),
        p2: Snap.path.toCubic(subSegList2).toString()
    }
}

//返回类似[[“M”，1，2]，“C”，3，4，5，6，7，8]，…]
//并且有一个自定义的.toString（）方法
segList1=Snap.path.toCubic（p1）
segList2=Snap.path.toCubic（p2）
交点=捕捉路径交点（p1、p2）
//处理相邻交叉口之间的支路
IntersectionPath=交叉点.map（（点，id）=>{
from=点
to=交叉点[id+1=to.segment1时处理案例
subSegList1=segList1.slice（从.segment1+1到.segment1）
//第一段具有交点
startSegments=[from.bez1.slice（0,2）.unshift（'M'），from.bez1.slice（2,8）.unshift（'C'）]
startString1=Snap.path.toCubic（startSegments.toString（）
//从段构造路径元素
startPath1=纸张路径（startString1）
startPathLength1=startPath1.getTotalLength（）
//获取从交点到端点的相关子路径
startPathString1=startPath1.getSubpath（from.t1*startPathLength1，startPathLength1）
subSegList1=Snap.path.toCubic（startPathString1.concat（subSegList1）
//最后一段也一样
endSegments=[to.bez1.slice（0,2）.unshift（'M'），to.bez1.slice（2,8）.unshift（'C'）]
endString1=Snap.path.toCubic（endSegments.toString（））
endPath1=纸张路径（endString1）
endPathLength1=endPath1.getTotalLength（）
endPathString1=endPath1.getSubpath（0，至.t1*endPathString1）
subglist1.push（Snap.path.toCubic（endPathString1）[1]）
subglist2=//对segList2执行相同的操作
返回{
p1:Snap.path.toCubic（subSegList1.toString（），
p2:Snap.path.toCubic（subglist2.toString（））
}
}
我们可以使用PaperJS布尔操作来实现，它可以使用SVG路径进行操作

PaperJS有5种不同的布尔运算：
exclude
，
subtract
，
unite
，
intersect
，
divide
，我们将使用其中的一种运算名为
intersecte
。这些操作也是具有相同名称的函数，它们返回具有函数的
项
对象。它返回true
SVG路径元素
，该元素具有两条路径相交的新形状

正确解决方案的示例


paper.install（窗口）；
window.onload=函数（）
{
纸张。设置（“画布”）；
变量p1='M 24.379464,51.504463 23.434524,23.156249 38.742559,12.572916 c0,0 29.860118，-9.0714281 17.00893,0.755953-12.851191,9.82738 13.229166,19.465774 13.229166,19.465774 z'，
p2='m 32.883928,0.28869028 c 0,0-15.686011,1.51190452-8.504463,7.18154712 7.181546,5.6696426 50.270836,30.0491076 26.458332,42.3333336-23.8125,12.284226 47.058036,14.174107 47.058036,14.174107 z'，
路径1=新路径（p1），
路径2=新路径（p2）；
path1.fillColor='rgba（255,0,0,5）'；
路径1.position=新点（25,25）；
path2.fillColor='rgba（0255,0,5）'；
路径2.position=新点（40,25）；
var结果=路径2.相交（路径1）；
result.selected=true；
result.fillColor='#77f'；
//exportSVG（）文档：http://paperjs.org/reference/item/#exportsvg
var svgpatheElement=result.exportSVG（），
dPath=svgpatheElement.getAttribute（'d'）；
document.querySelector（'path'）.setAttribute（'d'，dPath）；
var output=document.querySelector（“#output”）；
output.innerHTML=

我们的两条路径在单独SVG中相交的新形状：
第二个库声明了它对的依赖关系。也许你对原始库比较幸运。也许这个问题能给你一个答案：@ccprog，似乎它返回了带有一些附加信息的点。找不到从它们那里获得路径的方法。@philipp，我不想像第二个答案建议的那样将路径转换为多边形另一个答案似乎给出了点，而不是路径-不是吗？@ccprog，使用
toCubic
？它作为参数：路径字符串或段数组。它返回：段数组，但数组有