如何用SVG实现开放路径硬裁剪以生成调幅信号可视化路径？

我需要基于两条路径生成新路径，其中一条作为硬裁剪路径，实现一个形状被另一个形状裁剪的效果——这是为了开发一个带简单调幅信号可视化功能的Web应用。

效果说明 #

调幅操作中，第一条路径是载波信号，第二条是调制器。*运算符代表调制操作：调制器形状会限制载波，任何超出调制器的线段/值都会被截断以匹配调制器形状。

核心逻辑（伪代码） #

# 假设两个形状是等长的Y值数组（最小值为0），索引对应X值
载波 = [...]
调制器 = [...]
结果 = []

for x in 0 到 载波长度-1:
  结果.append(min(载波[x], 调制器[x]))

绘制(结果)

现有问题 #

由于有多个路径可作为操作数，我希望避免预写所有可能组合的SVG路径，而是动态生成它们。之前找到的相关方案仅适用于闭合/填充形状，只能得到形状交集；还有Warp.js，但它的变换函数会影响整个形状，不符合我的需求。

示例路径 #

第一组形状 #

载波路径

<svg viewBox="-10 -10 70 70" width="100" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <path
    d="M0,50 C0,50 0,0 25,0 L25,50 L50,50"
    stroke="black"
    stroke-width="2"
    fill="none"
  />
</svg>

调制器路径

<svg viewBox="-10 -10 70 70" width="100" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <path
    d="M0,50 L0,0 L50,50"
    stroke="black"
    stroke-width="2"
    fill="none"
  />
</svg>

裁剪后的结果路径（与第二个调制器作用后） #

<svg viewBox="-10 -10 70 70" width="100" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <path
    d="M0,50 L25,0 L25,50 L50,0 L50,50"
    stroke="black"
    stroke-width="2"
    fill="none"
  />
</svg>

问题 #

我不受任何框架限制，纯DOM操作完全可行。是否可以仅通过标记语言实现？或者有没有其他方法可以生成裁剪后的路径？

内容的提问来源于stack exchange，提问作者Xpktro