mask-origin

ویژگی mask-origin تعیین می کند که شروع ترسیم لایه ماسک در کدام ناحیه عنصر باشد.

به عبارت دیگر این ویژگی مشخص می کند که از چه باکسی از عنصر برای شروع قرارگیری لایه ماسک باید استفاده شود.

مقادیر ویژگی mask-origin

مقادیر این ویژگی مشابه background-origin می باشد با این تفاوت که ویژگی mask-origin سه مقدار بیشتر می پذیرد که آنها برای عناصر SVG مورد استفاده قرار می گیرند.


mask-origin: content-box | padding-box | border-box | margin-box | fill-box | stroke-box | view-box

چهار مقدار margin-box, border-box, padding-box و content-box بر روی عناصر HTML اعمال می شوند، و اگر برای عناصر SVG از آنها استفاده شود تبدیل به مقدار fill-box برای آن عنصر SVG خواهند شد.

سه مقدار fill-box, stroke-box و view-box بر روی عناصر SVG اعمال می شوند و اگر برای عناصر HTML از آنها استفاده شود تبدیل به مقدار اولیه ویژگی mask-origin برای آن عنصر HTML خواهند شد.

عنصر زیر دارای 20 پیکسل border و 20 پیکسل padding می باشد.

 
استفاده از ویژگی mask-origin
 

لایه ماسکی بر روی این عنصر بصورت زیر اعمال می کنیم:


.el {
  mask-image: url(masklayer.png);
  mask-size: 100px auto;
}

در ادامه مقادیر زیر را با استفاده از این مثال بررسی می کنیم:

content-box

شروع ترسیم لایه ماسک در نقطه 0 و 0 یا همان گوشه بالا و سمت چپ ناحیه content-box (یعنی قسمتی که محتوا در آن قرار میگیرد و همان داخلی ترین ناحیه) عنصر خواهد بود.


.el {
  mask-origin: content-box;
}

نتیجه مثال بالا بصورت زیر خواهد بود:

 
مقدار content-box برای ویژگی mask-origin
 

همانطور که مشاهده می کنیم شروع قرارگیری و چیدمان در قسمت بالا سمت چپ ناحیه محتوا می باشد که با علامت مخصوص مشخص شده است.

زمانی که از ویژگی mask-origin استفاده می کنیم بعد از مشخص شدن محل شروع ناحیه قرارگیری ماسک،
اگر لایه ماسک نیاز است که تکرار شود مسلما این موضوع باعث می شود که در ناحیه های دیگر نیز رسم شود. توجه داشته باشیم که کار mask-origin فقط تعیین نقطه شروع می باشد و این ویژگی محدودیتی برای ترسیم لایه ماسک در ناحیه های مختلف بوجود نمی آورد.

padding-box

شروع ترسیم لایه ماسک در نقطه 0 و 0 یا همان گوشه بالا و سمت چپ ناحیه padding-box عنصر خواهد بود.


.el {
  mask-origin: padding-box;
}

نتیجه مثال بالا بصورت زیر خواهد بود:

 
مقدار padding-box برای ویژگی mask-origin
 

همانطور که مشاهده می کنید این بار تکه شروع در قسمت بالا سمت چپ ناحیه Padding یا همان فاصله داخلی می باشد.

border-box

مقدار border-box، مقدار اولیه و پیشفرض ویژگی mask-origin می باشد که باعث می شود شروع ترسیم لایه ماسک در نقطه 0 و 0 یا همان گوشه بالا و سمت چپ ناحیه border-box عنصر باشد.


.el {
  mask-origin: border-box;
}

نتیجه مثال بالا بصورت زیر خواهد بود:

 

مقدار border-box برای ویژگی mask-origin

 

همانطور که مشاهده می کنید این بار تکه شروع در قسمت بالا سمت چپ ناحیه Border می باشد.

margin-box

شروع ترسیم لایه ماسک در نقطه 0 و 0 یا همان گوشه بالا و سمت چپ ناحیه margin-box عنصر خواهد بود.


.el {
  mask-origin: margin-box;
}

fill-box

این مقدار برای عناصر SVG تعیین می شود و باعث می شود تا ناحیه قرارگیری لایه ماسک نسبت به مرزهای خود شیء باشد.

stroke-box

این مقدار برای عناصر SVG تعیین می شود و باعث می شود تا ناحیه قرارگیری لایه ماسک نسبت به مرزهای Stroke یا خط بیرونی شیء SVG باشد.

view-box

این مقدار نیز برای عناصر SVG تعیین می شود و ناحیه قرارگیری لایه ماسک نسبت به نزدیک ترین viewport تعیین می شود.

اگر مقادیر viewBox برای عنصر تعیین شده باشند در نتیجه ناحیه قرارگیری لایه ماسک نسبت به همان مختصات تعیین شده توسط viewBox خواهد بود.

تعیین این ویژگی برای چند لایه

این ویژگی می تواند مجموعه ای از این مقادیر را نیز بپذیرد که مقادیر مختلف برای لایه های مختلف ماسک که توسط ویژگی mask-image تعیین می شوند استفاده می شود و مقادیر توسط ویرگول از هم جدا می شوند.


.el {
    mask-image: url(myMask.png), url(secondMask.png);
    mask-origin: content-box, border-box;
}

دمو

دموی زیر را بررسی کنید و مقادیر آن را برای ویژگی mask-origin تغییر دهید:

 

See the Pen mask-origin by Mojtaba Seyedi (@seyedi) on CodePen.


 

پشتیبانی مرورگر ها

مطالب مرتبط

سوال داری؟ برو به پنل پرسش و پاسخ

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *