آموزش ماسک گذاری SVG در CSS

ما می توانیم از عنصر <mask> در SVG برای اعمال یک ماسک به یک تصویر استفاده کنیم. در اینجا، ما از یک عنصر <mask> در SVG برای ایجاد لایه های ماسک مختلف، برای یک تصویر استفاده کرده ایم. 

یک دایره بعنوان لایه ی ماسک SVG

از عنصر <circle> در SVG برای ایجاد یک دایره استفاده می شود. 

 <svg width="600" height="400" xmlns="http://www.w3.org/2000/svg">
  <mask id="svgmask1">
    <circle r="150" cx="200" cy="200" fill="#ffffff" />
  </mask>
  <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg> 

لایه ی ماسک SVG به صورت بیضی

از عنصر <ellipse> در SVG برای ایجاد یک بیضی استفاده می شود. 

 <svg width="600" height="400" xmlns="http://www.w3.org/2000/svg">
  <mask id="svgmask1">
    <ellipse cx="220" cy="150" rx="200" ry="100" fill="#ffffff" />
  </mask>
  <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg> 

لایه ی ماسک SVG به صورت مثلث

از عنصر <polygon> در SVG برای ایجاد یک گرافیک که حداقل حاوی سه ضلع است، استفاده می شود. 

 <svg width="600" height="400" xmlns="http://www.w3.org/2000/svg">
  <mask id="svgmask1">
    <polygon fill="#ffffff" points="200 0, 400 400, 0 400"></polygon>
  </mask>
  <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg> 

ماسک SVG به صورت یک ستاره

همچنین با استفاده از عنصر <polygon> در SVG، می توانیم یک لایه ی ماسک به شکل ستاره ایجاد کنیم. 

 <svg width="600" height="400" xmlns="http://www.w3.org/2000/svg">
  <mask id="svgmask1">
    <polygon fill="#ffffff" points="100,10 40,198 190,78 10,78 160,198"></polygon>
  </mask>
  <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg> 

ماسک در SVG - چندین دایره

در اینجا، سه دایره تعریف کرده ایم که مختصات x و y مختلفی دارند. 

 <svg width="600" height="400" xmlns="http://www.w3.org/2000/svg">
  <mask id="svgmask1">
    <circle fill="#ffffff" cx="75" cy="75" r="75"></circle>
    <circle fill="#ffffff" cx="80" cy="260" r="75"></circle>
    <circle fill="#ffffff" cx="270" cy="160" r="75"></circle>
  </mask>
  <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg> 

منبع: https://www.w3schools.com/css