اگر میخواهید با استفاده از SVG یک تصویر را برش دهید، توصیه میشود از ویژگی CSS به نام `clip-path` استفاده کنید. اسکریپت زیر چندین مانع را از بین میبرد: SVGها را میتوان با استفاده از Illustrator ذخیره کرد، میتوانید URL (نسبی یا مطلق) یک SVG را مشخص کنید (کروم در حال حاضر فقط از SVGهای درونخطی پشتیبانی میکند ) و برش نیز کاملاً واکنشگرا است.
ابتدا یک ماسک برش دهنده در Adobe Illustrator ایجاد کرده و SVG را با تنظیمات زیر صادر می کنید:
نسبت ابعاد SVG و تصویر باید یکسان باشد. در نهایت، SVG خارجی در تصویر ارجاع داده میشود، برای مثال، در ویژگی `data-clip` .:
1e4823ee95525ce0e04bb693c48e0e35
حالا اسکریپت زیر را ادغام کنید:
1e4823ee95525ce0e04bb693c48e0e35
نتیجه این است که:
See the Pen clip-path and SVGs by David Vielhuber (@vielhuber) on CodePen.