| 目次 |
|---|
|
・画像等を埋め込む ・クリッピング |
<svg>要素では、JPEGやPNGといったブラウザに対応した画像であれば、それを埋め込むことができます。
<image>要素を使うことで容易に画像を埋め込むことができます。
リスト1. 画像等を埋め込む
<image x="110" y="20" width="280px" height="160px" xlink:href="sample01.jpg"/>
<svg>要素では、画像の一部をクリッピングすることができます。
クリッピングは画像だけでなく、いろいろなSVG要素に適用出来ます。
リスト2. クリッピング
<clipPath id="clip01"> <rect x="110" y="20" width="200" height="100" /> </clipPath> <g style="clip-path:url(#clip01)"> <image x="110" y="20" width="280px" height="160px" xlink:href="sample01.jpg"/> </g>