クリップパスを使用して画像からSVGを切り取ります

SVGを使用して画像を切り取りたい場合は、CSSプロパティのclip-pathを使用することをお勧めします。 次のスクリプトはでこぼこの障壁をトリガーします。SVGはIllustratorを使用して保存でき、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.

バック