Klip yolu ile görüntülerden SVG'leri kesin

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.

Geri