SVGでできる簡単なサンプルを書きます。今回は、クリッピングとイベントを組み合わせます。参考サイトで紹介しているSVGのサンプルを簡単に解説して、それを元に自分でも作ってみます。
X-ray meの簡易的な解説
上記サイトのサンプルを解説します。実際の動作は、参考サイトを確認してください。主要な要素を整理すると以下のようになります。
重なり順は、下に人間のSVG、その上に骨人間のSVGの順です。骨人間を円形でクリッピングしています。人間と骨人間がぴったり重なっているので、丁度、骨人間が透けて見えるようになっています。
マウスの動きに合わせて、クリッピングしている円の座標が変わるので、動きのあるものになっています。クリッピングとイベントを組み合わせた良い例だと思います。
クリッピングのサンプル
クリッピングのサンプルを以下に示します。
コード
<svg width="300" height="200" viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg"> <clipPath id="ellipseclip"> <ellipse cx="0" cy="0" rx="150" ry="150" style="fill: #ffffff"/> </clipPath> <g clip-path="url(#ellipseclip)"> <rect x="0" y="0" width="200" height="200" fill="green"/> <rect x="50" y="50" width="200" height="200" fill="blue"/> </g> </svg>
デモ
クリッピングとイベントの組み合わせ
以下のデモは、クリッピングとイベントを組み合わせたものです。マウスカーソルを四角形の中で移動させてみてくだい。マウスカーソルの座標によってクリッピングの位置が変わります。
