SVG を使用して画像を切り抜く場合は、CSS プロパティ`clip-path`を使用することをお勧めします。以下のスクリプトは、いくつかの障害を取り除きます。Illustrator を使用して SVG を保存でき、SVG の (相対または絶対) URL を指定できます (Chrome は現在、インライン SVG のみをネイティブでサポートしています)。また、切り抜きは完全にレスポンシブです。
まず、Adobe Illustratorでクリッピングマスクを作成し、次の設定でSVGをエクスポートします:
SVGと画像の縦横比は同じである必要があります。最後に、外部SVGは画像内で参照されます。例えば、 `data-clip`属性などです。:
1e4823ee95525ce0e04bb693c48e0e35
次に、次のスクリプトを統合します:
1e4823ee95525ce0e04bb693c48e0e35
結果はそれです:
See the Pen clip-path and SVGs by David Vielhuber (@vielhuber) on CodePen.