SVGでクリップパスを使用すると描画をクリップパスで示される領域に限定できます。
以下の例では、矢印をダイヤ状のクリッピングパスでクリップしその結果が黄色いダイヤであることを支援しています。
クリッピングパスはclipPathで定義しid要素で名前を定義します。図形やg要素にclip-pathを追加し先ほどのクリッピングパスのid名を指定するとクリッピングされて描画されます。


クリッピングパスの定義とクリッピングパスを適用する方法の例（上図の一番右側の図）のソースコードは以下の通りです。

<svg width="100" height="100"  viewBox="-50 -70 100 100" xmlns="http://www.w3.org/2000/svg"> 
<!-- クリッピングパス(名前がc1)の定義 -->
 <clipPath id="c1">
  <path  d="M -20,0 L 0,-20 L 20,0 L 0,20 z" />
 </clipPath>
<!-- クリッピングパスの適用例 -->
 <path d="M -20,20 H 20 V -20 H 30 L 0,-50 L -30,-20 h 10 z" fill="yellow" stroke="black" clip-path="url(#c1)" />
</svg>

Javascriptを使用してあらかじめ定義しているクリッピングパスを動的に図形に適用します。
ボタンをクリックするとクリップパスを適用します。
クリッピングしたい図形のオブジェクトをdocument.getElementByIdで取得し、setAttributeによりclip-path属性をクリッピングパスの名称に変更します。

Javascriptを使用してクリッピングパスを動的に作成し図形に適用します。
ボタンをクリックするとクリップパスが適用されます。
空のクリッピングパスが作成されていますのでそのオブジェクトをdocument.getElementByIdで取得します。
document.createElementNSでクリッピングパスのpath図形を作成します。
クリッピンパスにsetAttributeによりpath図形のd属性にクリッピング形状を設定します。
appendChildにより空のクリッピングパスにpath図形を追加します。
クリッピングしたい図形のオブジェクトをdocument.getElementByIdで取得し、setAttributeによりclip-path属性をクリッピングパスの名称に変更します。