如何在SVG中使用笔触作为剪切路径？

Question

我有一条如下所示的路径：

<path class="path" d="M0,550L0,366.6666666666667C0,366.6666666666667,95.43389463154384,198.61111111111114,143.31860620206734,183.33333333333337C191.20331777259085,168.0555555555556..."></path>

这样显示在我的页面上：

我希望这是显示一组矩形的剪切路径。我目前有它看起来像这样：

但是，我仍然希望它是2px的行，当它进入new领域时会改变颜色<rect>。我目前正在考虑通过某种方式将路径添加到中来解决此问题<clipPath>，但是我也对其他使该方法起作用的方法持开放态度。

Answer 1

<clipPath>在这种情况下，A 是错误的方法。正确的解决方案是使用<mask>。

<svg width="500" height="240">

  <defs>
    <mask id="graph">
      <path d="M 0,150 L 100,20 L 200,210 L 300,100 L 400,130 L 500,50"
            fill="none" stroke="white" stroke-width="4"/>
    </mask>
  </defs>

  <g mask="url(#graph)">
    <rect y="0" width="500" height="60" fill="red"/>
    <rect y="60" width="500" height="60" fill="blue"/>
    <rect y="120" width="500" height="60" fill="green"/>
    <rect y="180" width="500" height="60" fill="yellow"/>
  </g>
</svg>