CSS "clip-rule" özelliği, bir SVG elementinin nasıl kesileceğini belirler. Bu özellik, elementin kesilmesi sırasında kullanılacak olan kuralı belirtir.

"clip-rule" özelliğinin iki temel seçeneği vardır: "nonzero" ve "evenodd". "nonzero" seçeneği varsayılan olarak kullanılır ve elementin kesilmesi sırasında, elementin içine giren çizgilerin sayısını kullanır. Eğer çizgilerin sayısı sıfırdan farklı ise, element kesilir. "evenodd" seçeneği ise, elementin kesilmesi sırasında, elementin içine giren çizgilerin sayısının çift veya tek olmasını kullanır. Eğer çizgilerin sayısı çift ise, element kesilir.

Aşağıdaki kullanım örneği verilmiştir...

/* nonzero kullanılarak kes */
#shape1 {
  clip-path: url(#clip1);
  clip-rule: nonzero;
}
/* evenodd kullanılarak kes */
#shape2 {
  clip-path: url(#clip2);
  clip-rule: evenodd;
}

Diğer bir örneği inceleyelim...

<svg width="200" height="200">
  <defs>
    <clipPath id="clip1">
      <rect x="20" y="20" width="100" height="100"/>
    </clipPath>
    <clipPath id="clip2">
      <circle cx="50" cy="50" r="30"/>
    </clipPath>
  </defs>
  <rect x="0" y="0" width="200" height="200" fill="black"/>
  <path d="M50,20 L100,20 L100,70 Q90,90 50,70 Z" fill="white" clip-path="url(#clip1)" clip-rule="nonzero"/>
  <path d="M60,50 A20,30 0 1,1 80,70" fill="white" clip-path="url(#clip2)" clip-rule="evenodd"/>
</svg>

Bu örnekte, ilk path elementi "#clip1" id'li clipPath ile kesilmektedir ve clip-rule "nonzero" kullanılmıştır. İkinci path elementi ise "#clip2" id'li clipPath ile kesilmektedir ve clip-rule "evenodd" kullanılmıştır.

İlk path elementi, "nonzero" kuralını kullanarak dikdörtgen şeklinde kesilmiştir. İkinci path elementi ise "evenodd" kuralını kullanarak daire şeklinde kesilmiştir. Bu örnekte ayrıca svg içerisinde tanımlı olan defs içinde clipPath elemanları tanımlanmış ve bu elemanlar daha sonra path elemanlarına clip-path özelliği ile atanmıştır.

Bu şekilde, SVG tasarımında özelleştirilmiş kesme kuralları kullanarak farklı şekiller oluşturabilirsiniz. Bu özellik, SVG grafiklerinizi daha ilginç ve estetik hale getirmek için kullanabilirsiniz.