ماسک گذاری SVG در CSS (Masking - SVG)
در «ماسک گذاری SVG»، عنصر «ماسک (mask)» در SVG روی یک تصویر اعمال می شود تا بخش هایی از آن دیده یا پنهان شوند. این روش برای ساخت برش های خلاقانه بسیار کاربردی است.
لایه ماسک با SVG
با استفاده از تگ <mask>
در SVG می توانید یک لایه ماسک تعریف کنید و آن را روی تصویر اعمال کنید. در کد منبع، شکل ماسک داخل <mask>
ترسیم می شود و سپس با ویژگی mask="url(#id)"
به تصویر نسبت داده می گردد.
ماسک دایره ای با <circle>
در این الگو یک دایره سفید داخل <mask>
رسم شده و همان قسمت از تصویر نمایان می شود. بخش های بیرون ماسک پنهان خواهند بود.
ماسک بیضی با <ellipse>
با عنصر <ellipse>
می توانید بیضی بسازید و آن را به عنوان ماسک روی تصویر اعمال کنید.
ماسک چندضلعی با <polygon> (مثلث)
برای ساخت ماسک های چندضلعی مانند مثلث، از <polygon>
و نقاط دلخواه استفاده کنید.
ماسک ستاره ای با <polygon>
همچنین می توانید با تعیین نقاط مناسب، یک ستاره رسم کرده و همان شکل را به عنوان ماسک روی تصویر اعمال کنید.
چند ماسک دایره ای در یک لایه
می توان چندین <circle>
را داخل یک <mask>
قرار داد تا بخش های متعددی از تصویر نمایان شوند.
نکته: مقداردهی ماسک در SVG داخل همان سند انجام می شود. برای کنترل تناسب و قاب تصویر در CSS می توانید از object-fit و برای جابه جایی محتوا از object-position کمک بگیرید.
خواص مرتبط با ماسک گذاری
در این فصل به خواص ماسک نیز اشاره شده است؛ مانند mask-image
، mask-repeat
، mask-position
و mask-size
که رفتار ماسک را کنترل می کنند.
هشدار: در برخی سناریوها برای سازگاری بهتر لازم است نسخه -webkit-
برخی خواص ماسک را نیز تعریف کنید.
ادامه مطالعه و مطالب مرتبط
برای دیگر روش ها، بخش های ماسک گذاری گرادیانی و ماسک گذاری با PNG را ببینید. همچنین رفتار محتوای تصویر را با object-fit و موقعیت آن را با object-position مدیریت کنید.
MDN: SVG <mask> و MDN: SVG <image> جزئیات و الگوهای کاربردی را توضیح می دهند.