SVGでクリッピングパスとしてストロークを使用するにはどうすればよいですか？

Question

私は、次のようなパスを持っている：

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

これは、ように私のページに示しています

これは私が表示され、それに対してクリッピングパスするために私がしたいです長方形のセット。それはそれにもかかわらず、それは新しい<rect>の領域に入るときの色を変える2ピクセルライン、であるためには

しかし、私は希望：私は現在、それはこのように見えるようになってきました。私は現在、何とかパスのストロークを<clipPath>にすることでこれに近づくことを考えていますが、私はこれも同様に機能する他の方法にもオープンしています。

Answer 1

<clipPath>は、この場合には間違ったアプローチです。正しい解決策は、<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>