برش در SVG با عنصر clipPath

با استفاده از عنصر <clipPath> می‌توان ناحیه یا مسیر برش تعریف کرد و از آن در ویژگی clip-path برای مخفی کردن قسمتی از یک عنصر HTML یا SVG استفاده کرد. زمانی که مسیر برشی را بر روی یک عنصر اعمال می‌کنیم، هر قسمتی از آن عنصر که خارج از مسیر برش قرار بگیرد، نمایش داده نمی‌شود.

clipPath یا مسیر برش مرزی را بر روی یک عنصر بوجود می آورد که هرچه که داخل این مرز باشد باید نمایش داده شود و هر آنچه که خارج آن باشد قابل مشاهده نخواهد بود و به اصطلاح برش خواهد خورد.

ساخت مسیر برش در SVG

دایره زیر را در نظر بگیرید:

<svg width="660" height="220">
  <circle cx="110" cy="110" r="100" fill="#9c6" />
</svg>

هدف این است قسمتی از این دایره را با استفاده از clipPath مخفی ‌کنیم.

برای پیاده‌سازی یک مسیر برش در SVG باید شکل یا مسیر دلخواه را درون عنصر <clipPath> قرار داده و مقداری به ویژگی ID آن بدهیم (clip-1) و سپس می توان بصورت زیر با استفاده از تابع url و id و ویژگی clip-path برش مورد نظر را روی عنصر اعمال کرد:

<svg width="660" height="220">
  <defs>
    <clipPath id="clip-1">
      <rect x="10" y="10" width="200" height="100" />
    </clipPath>
  </defs>
  <circle cx="110" cy="110" r="100" fill="#9c6" clip-path="url(#clip-1)" />
</svg>

خروجی:

استفاده از متن به عنوان مسیر برش

فرض کنید مطابق با شکل زیر یک مستطیل و یک دایره داشته باشیم:

<svg width="400px" height="200px">
  <rect x="0" y="0" width="200" height="200" fill="#ed6e46" />
  <circle cx="310" cy="100" r="135" fill="#bbc42a" />
</svg>

حال اگر برای مسیر برش از یک متن بصورت زیر استفاده کنیم:

<clipPath id="clip-text">
  <text x="0" y="50%" fill="#f27678" font-size="120px" font-family=" 'Signika', sans-serif">SVG 2</text>
</clipPath>

خروجی زیر را خواهیم داشت:

اعمال مسیر برش روی یک گروه

در مثال برش متنی بالا، زمانی که می‌خواستیم از برش مسیر استفاده کنیم ویژگی clip-path را به هر دو عنصر <rect> و <circle> بصورت جداگانه و تکی دادیم، حال آنکه می‌توان این ویژگی را به گروهی از عناصر هم اعمال کرد.

به عنوان مثال اگر دو شکل بالا را بصورت زیر در یک عنصر <g>
قرار دهیم، می‌توانیم با تنها یک ویژگی clip-path روی عنصر گروه، برش را اعمال کنیم:

<svg width="400px" height="200px">
  <defs>
    <clipPath id="cliptext-2">
      <text x="0" y="50%" fill="#f27678" font-size="120px" font-family=" 'Signika', sans-serif">SVG ♥️</text>
    </clipPath>
  </defs>  
  <g clip-path="url(#cliptext-2)">
    <rect x="0" y="0" width="200" height="200" fill="#ed6e46" />
    <circle cx="310" cy="100" r="135" fill="#bbc42a" />
  </g>
</svg>

اعمال مسیر برش روی تصاویر

بصورت زیر می‌توان مسیر برش را روی یک عنصر تصویر نیز اعمال کرد:

<svg width="600" height="300">
  <clipPath id="clipimage">
    <circle cx="112" cy="50" r="30" />
    <circle cx="250" cy="80" r="35"/>
    <polygon points="155 190, 215 190, 185,155" />
    <circle cx="335" cy="195" r="45"/>
    <circle cx="465" cy="145" r="25"/>
    <text x="10" y="130" font-family="Courier New" font-weight="bold" font-size="4em" >Clipping Path</text>
    <path d="M20,20 L80,20 L20,50 L80,50 L20,80 L80,80z"></path>
  </clipPath>

  <image clip-path="url(#clipimage)" xlink:href="https://assets.css-tricks.ir/images/blend-mode-example-texture.jpg"/>
</svg>

در این مثال از انواع عناصر SVG برای ساخت اشکال متفاوت در تعریف مسیر برش استفاده شده است که می‌توانید خروجی نهایی را در دموی زیر بررسی کنید:

 

See the Pen
clipPath in SVG by Mojtaba Seyedi (@seyedi)
on CodePen.

 

استفاده از این عنصر در CSS

از عنصر <clipPath> می‌توان برای برش در CSS هم بوسیله ویژگی clip-path استفاده کرد، که می‌توانید در مطلب مربوط به خودش این موضوع را بررسی کنید.

ویژگی clipPathUnits

این ویژگی تعیین می‌کند که برای محتوای عنصر <clipPath> از کدام سیستم مختصات استفاده شود. یعنی از مختصات viewbox یا عنصری که مسیر برش بر روی آن اعمال خواهد شد.

userSpaceOnUse: مقدار پیشفرض است و باعث می‌شود مقادیر مسیر برش در سیستم مختصات بصورت مطلق، یعنی بر اساس سیستم مختصات فعلی محاسبه شوند.

objectBoundingBox: باعث می‌شود مقادیر بر اساس سیستم مختصات عنصری که مسیر برش روی آن اعمال می‌شود، محاسبه شوند. به بیان دیگر مختصات مسیر برش بر اساس عنصر مربوطه می‌باشد و این باعث می‌شود، برش بر اساس عنصری که از آن استفاده می‌کند تغییر اندازه بدهد.

نمونه استفاده از این ویژگی:

<svg width="660" height="220">  
 <defs>  
   <clipPath id="quarter-circle-2" clipPathUnits="objectBoundingBox">  
     <rect x="0" y="0" width="0.5" height="0.5" />  
   </clipPath>  
 </defs>

 <circle cx="110" cy="110" r="100" fill="#9c6" clip-path="url(#quarter-circle-2)" />  
</svg>

ویژگی clip-rule

این ویژگی بر روی عناصری که در تعریف مسیر برش از آن‌ها استفاده شده است، اعمال می‌شود و مشخص می‌کند چه ناحیه‌ای داخل مسیر برش و چه ناحیه‌ای خارج از آن قرار می‌گیرد.
مقادیر این ویژگی nonzero و evenodd هستند که مشابه به مقادیر ویژگی fill-rule هستند که می‌توانید در مطلب مربوطه در موردشان بخوانید.

نمونه کد استفاده از این ویژگی در سایت MDN:

<svg width="100" viewBox="0 0 100 90" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <!-- Define star path -->
  <defs>
    <path d="M50,0 21,90 98,35 2,35 79,90z" id="star" />
  </defs>

  <!-- Left: evenodd -->
  <clipPath id="emptyStar">
    <use xlink:href="#star" clip-rule="evenodd" />
  </clipPath>
  <rect clip-path="url(#emptyStar)" width="50" height="90" fill="blue" />

  <!-- Right: nonzero -->
  <clipPath id="filledStar">
    <use xlink:href="#star" clip-rule="nonzero" />
  </clipPath>
  <rect clip-path="url(#filledStar)" width="50" height="90" x="50" fill="red" />
</svg>

تفاوت استفاده از مسیر برش و ماسک کردن

هر دوی آن‌ها برای نشان دادن یا مخفی کردن قسمتی از عناصر استفاده می‌شوند.

مسیر برش بصورت خیلی واضح، خطی بین قسمت‌های مخفی و آشکار می‌کشد اما ماسک به این صورت عمل ‌می‌کند که سراسر عنصر را در بر می‌گیرد و قسمتی از عنصر می‌تواند بصورت 100درصدی نمایش داده شود و قسمتی دیگر 0، 20، 50 یا هر درصد دیگری قابل مشاهده باشد.