画像の表示

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 と異なっているので注意しましょう。