画像の表示

jpgやpng形式の画像ファイルを指定して画像を表示させることができます。

image要素を使って次のように書きます。

 <image xlink:href="heart.jpg" x="0" y="0" width="100" height="100" />

クリップ

クリップとは図形の一部分だけを切り取って表示するものです。

 <defs>
     <g id="gr">
         ...
     </g>
     <clipPath id="p2">
         ...
     </clipPath>
 </defs>
 <use xlink:href="#gr" style="clip-path:url(#p2);" />

defs要素で２つの定義を行っており、 p2 と gr という名前をつけています。

gr で描く図形を定義し、 p2 で切り取るのに使うパスを定義しています。

useで名前が gr の図形を描くときに、styleにclip-pathを指定し、指定されたパス p2 の内側だけを表示するものです。

クリップパスの定義は clipPath クリップパスの利用は clip-path と異なっているので注意しましょう。