Bir SVG yardımıyla bir görüntüyü kesmek istiyorsanız, CSS özelliği klip yolunun kullanılması önerilir. Aşağıdaki komut dosyası engebeli engelleri tetikler: SVG, Illustrator'ın yardımıyla kaydedilebilir, bir SVG'nin (göreli veya mutlak) URL'sini belirtebilirsiniz (Chrome şimdiye kadar yerel olarak yalnızca satır içi SVG'yi destekler ) ve boyun çizgisi de tamamen duyarlıdır.
Önce Adobe Illustrator'da bir kırpma maskesi oluşturursunuz ve SVG'yi aşağıdaki ayarlarla dışa aktarırsınız.:
SVG ve görüntünün en boy oranları aynı olmalıdır. Son olarak, görüntüde, örneğin data-clip özniteliğinde harici SVG'ye başvurulur.:
1e4823ee95525ce0e04bb693c48e0e35
Şimdi aşağıdaki betiği entegre edin:
1e4823ee95525ce0e04bb693c48e0e35
Sonuç şu ki:
See the Pen clip-path and SVGs by David Vielhuber (@vielhuber) on CodePen.