Bir SVG kullanarak bir görüntüyü kesmek istiyorsanız, `clip-path` CSS özelliğini kullanmanız önerilir. Aşağıdaki komut dosyası birkaç engeli ortadan kaldırır: SVG'ler Illustrator kullanılarak kaydedilebilir, bir SVG'nin (göreceli veya mutlak) URL'sini belirtebilirsiniz (Chrome şu anda yalnızca satır içi SVG'leri yerel olarak destekler ) ve kesim işlemi 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 resmin en boy oranları aynı olmalıdır. Son olarak, harici SVG, örneğin `data-clip` özniteliğinde, resimde referans olarak kullanılır.:
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.