JavaScriptを使用したSVGパスのクリッピング

Question

JavaScriptを使用してパスをクリップしようとしています。私は以下のコードを試しました。

<svg width="900" height="600"> 
 
     <clipPath id="clip"> 
 
      <path d="M 0 464 L 0 293.8666666666667 C 92.6666666666456 251.59111111111108 185.3333333332912 209.31555555555556 278 201.06666666666666 C 370.6666666666456 192.8177777777778 463.33333333329125 218.59555555555556 556 247.46666666666673 C 648.6666666666456 276.33777777777783 741.3333333332912 308.3022222222222 834 340.2666666666667 L 834 464" /> 
 
     </clipPath> 
 
     <path d="M 0 464 L 0 293.8666666666667 C 92.6666666666456 251.59111111111108 185.3333333332912 209.31555555555556 278 201.06666666666666 C 370.6666666666456 192.8177777777778 463.33333333329125 218.59555555555556 556 247.46666666666673 C 648.6666666666456 276.33777777777783 741.3333333332912 308.3022222222222 834 340.2666666666667 L 834 464" fill="red" opacity="0.8" /> 
 
     <path d="M 0 293 L 0 139.19999999999996 C 92.6666666666456 107.06370370370374 185.3333333332912 74.92740740740744 278 69.60000000000001 C 370.6666666666456 64.27259259259263 463.33333333329125 85.75407407407415 556 108.2666666666667 C 648.6666666666456 130.77925925925928 741.3333333332912 154.322962962963 834 177.86666666666665 L 834 340.2666666666667 M 0 293.8666666666667 C 92.6666666666456 251.59111111111108 185.3333333332912 209.31555555555556 278 201.06666666666666 C 370.6666666666456 192.8177777777778 463.33333333329125 218.59555555555556 556 247.46666666666673 C 648.6666666666456 276.33777777777783 741.3333333332912 308.3022222222222 834 340.2666666666667" stroke="red" fill="green" opacity="0.7"/> 
 
    </svg>

このクリップ赤色パス以外のパス。私は赤色の上にレンダリングされた緑の色のパスをクリップしたいと思います。それをクリップすることは可能ですか？

Answer 1

このような意味ですか？

<svg width="900" height="600"> 
 
     <clipPath id="clip"> 
 
      <path d="M 0 464 L 0 293.8666666666667 C 92.6666666666456 251.59111111111108 185.3333333332912 209.31555555555556 278 201.06666666666666 C 370.6666666666456 192.8177777777778 463.33333333329125 218.59555555555556 556 247.46666666666673 C 648.6666666666456 276.33777777777783 741.3333333332912 308.3022222222222 834 340.2666666666667 L 834 464" /> 
 
     </clipPath> 
 
     <path d="M 0 464 L 0 293.8666666666667 C 92.6666666666456 251.59111111111108 185.3333333332912 209.31555555555556 278 201.06666666666666 C 370.6666666666456 192.8177777777778 463.33333333329125 218.59555555555556 556 247.46666666666673 C 648.6666666666456 276.33777777777783 741.3333333332912 308.3022222222222 834 340.2666666666667 L 834 464" fill="red" opacity="0.8" /> 
 
     <path d="M 0 293 L 0 139.19999999999996 C 92.6666666666456 107.06370370370374 185.3333333332912 74.92740740740744 278 69.60000000000001 C 370.6666666666456 64.27259259259263 463.33333333329125 85.75407407407415 556 108.2666666666667 C 648.6666666666456 130.77925925925928 741.3333333332912 154.322962962963 834 177.86666666666665 L 834 340.2666666666667 M 0 293.8666666666667 C 92.6666666666456 251.59111111111108 185.3333333332912 209.31555555555556 278 201.06666666666666 C 370.6666666666456 192.8177777777778 463.33333333329125 218.59555555555556 556 247.46666666666673 C 648.6666666666456 276.33777777777783 741.3333333332912 308.3022222222222 834 340.2666666666667" stroke="red" fill="green" opacity="0.7" 
 
       clip-path="url(#clip)"/> 
 
    </svg>

更新

最も簡単な解決策が適切にあなたの緑のパスを構築することです。元の緑色のパスは、次の2つのサブパスで構成されています。

1. 1つは左から始まり、右上に上がっています。
2. 左から2番目が始まり、赤いカーブの上が続きます。

サブパスが個別に満たされているので、あなたは実際に2つの緑色の図形を取得しました。どちらも赤い形の上に重なっています。

解決策は、2番目のサブパスを反転させることです（右から左に移動する）。 それを使用して最初の緑色の図形を完成させ、赤色の図形の周りを回るのではなく、赤色の図形を回ります。

<svg width="900" height="600"> 
 
     <path d="M 0 464 L 0 293.8666666666667 C 92.6666666666456 251.59111111111108 185.3333333332912 209.31555555555556 278 201.06666666666666 C 370.6666666666456 192.8177777777778 463.33333333329125 218.59555555555556 556 247.46666666666673 C 648.6666666666456 276.33777777777783 741.3333333332912 308.3022222222222 834 340.2666666666667 L 834 464" fill="red" opacity="0.8" /> 
 
     <path d="M 0 293 L 0 139.19999999999996 C 92.6666666666456 107.06370370370374 185.3333333332912 74.92740740740744 278 69.60000000000001 C 370.6666666666456 64.27259259259263 463.33333333329125 85.75407407407415 556 108.2666666666667 C 648.6666666666456 130.77925925925928 741.3333333332912 154.322962962963 834 177.86666666666665 L 834 340.2666666666667 C 741 308 648 276 556 247 C 463 218 370 192 278 201 C 185 209 92 251 0 293 Z" stroke="red" fill="green" opacity="0.7"/> 
 
    </svg>