ماسک SVG (Masking-SVG)
در «ماسک SVG» از تگ های برداری برای ساخت ماسک استفاده می کنیم. «ماسک (Mask)» لایه ای است که بعضی بخش های تصویر را پنهان می کند. رنگ سفید یعنی دیده شدن؛ سیاه یعنی نادیدگی.
دایره (Circle) به عنوان ماسک
با تگ «دایره (circle)» یک پنجره گرد روی تصویر می سازیم. نتیجه بسیار تمیز است.
<svg width="600" height="400" xmlns="http://www.w3.org/2000/svg">\n <mask id="svgmask1">\n <circle r="150" cx="200" cy="200" fill="#ffffff"></circle>\n </mask>\n <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>\n</svg>\nبیضی (Ellipse) به عنوان ماسک
بیضی قاب نرم تری می دهد. برای تصاویر عریض عالی است.
<svg width="600" height="400" xmlns="http://www.w3.org/2000/svg">\n <mask id="svgmask1">\n <ellipse cx="220" cy="150" rx="200" ry="100" fill="#ffffff"></ellipse>\n </mask>\n <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>\n</svg>\nمثلث (Polygon) به عنوان ماسک
با «چندضلعی (polygon)» می توانیم هر شکل دلخواه بسازیم. اینجا مثلث داریم.
<svg width="600" height="400" xmlns="http://www.w3.org/2000/svg">\n <mask id="svgmask1">\n <polygon fill="#ffffff" points="200 0, 400 400, 0 400"></polygon>\n </mask>\n <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>\n</svg>\nستاره با چندضلعی
با نقاط مناسب، یک ستاره ساده می سازیم. سپس آن را ماسک می کنیم.
<svg width="600" height="400" xmlns="http://www.w3.org/2000/svg">\n <mask id="svgmask1">\n <polygon fill="#ffffff" points="100,10 40,198 190,78 10,78 160,198"></polygon>\n </mask>\n <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>\n</svg>\nچند دایره کنار هم
می توانیم چند شکل سفید بگذاریم. هرکدام یک پنجره نمایش می شوند.
<svg width="600" height="400" xmlns="http://www.w3.org/2000/svg">\n <mask id="svgmask1">\n <circle fill="#ffffff" cx="75" cy="75" r="75"></circle>\n <circle fill="#ffffff" cx="80" cy="260" r="75"></circle>\n <circle fill="#ffffff" cx="270" cy="160" r="75"></circle>\n </mask>\n <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>\n</svg>\nنکته: در ماسک SVG، بخش های سفید دیده می شوند. بخش های سیاه پنهان می شوند. خاکستری نیمه شفاف است.
گام های عملی سریع
- یک <mask> با شناسه بساز.
- شکل های سفید داخل ماسک بگذار.
- روی <image> ویژگی mask را به url(#id) بده.
جمع بندی سریع
- سفید نمایش می دهد؛ سیاه پنهان می کند.
- دایره و بیضی قاب نرم می دهند.
- چندضلعی شکل های خلاقانه می سازد.
- چند شکل یعنی چند پنجره نمایش.
برای مطالعه مرتبط: ماسک گرادیان و ماسک PNG. همچنین صفحه ماسک SVG مرجع سریع توست.