clip-rule

nonzero

Для каждой точки в области маски обрезки проводится луч в случайном направлении. Каждый раз, когда луч пересекает часть пути обрезки, счётчик увеличивается на единицу, если часть пути обрезки движется слева направо по лучу, и уменьшается на единицу, если часть пути обрезки движется справа налево по лучу. Если итоговое значение счётчика равно нулю, точка находится вне фигуры пути. В противном случае — внутри.

even-odd

Для каждой точки в области маски обрезки проводится луч в случайном направлении. Каждый раз, когда луч пересекает часть пути обрезки, счётчик увеличивается на единицу. Если итоговое значение счётчика чётно, точка находится вне фигуры пути; в противном случае — внутри. Ноль считается чётным числом.

clip-rule = 
  nonzero  |
  evenodd  

На этом изображении SVG есть два прямоугольника, которые обрезаны, один с каждым правилом обрезки. Есть два <clipPath> элемента, так что один может быть настроен на использование правила обрезки «неравен нулю», а другой — на использование правила «чёт-нечёт». Оба пути нарисованы по часовой стрелке как для внутренней, так и для внешней частей.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 50">
  <g stroke="#123" fill="#BCD">
    <!-- basic rectangle and clipping path visualization follow -->
    <rect x="10" y="10" width="30" height="30" />
    <path
      d="M 65,5 l 20,20 -20,20 -20,-20 20,-20 m 0,10 l 10,10 -10,10 -10,-10 10,-10 z"
      fill="none"
      stroke-width="0.5" />
    <!-- rectangles to be clipped follow -->
    <rect x="110" y="10" width="30" height="30" clip-path="url(#clipper1)" />
    <rect x="160" y="10" width="30" height="30" clip-path="url(#clipper2)" />
  </g>
  <!-- clipping paths follow -->
  <clipPath id="clipper1" clipPathUnits="objectBoundingBox">
    <path
      d="M 0.5 -0.15 l 0.65 0.65 -0.65,0.65 -0.65,-0.65 0.65,-0.65 m 0,0.33 l 0.33,0.33 -0.33,0.33 -0.33,-0.33 0.33,-0.33 z"
      clip-rule="evenodd" />
  </clipPath>
  <clipPath id="clipper2" clipPathUnits="objectBoundingBox">
    <path
      d="M 0.5 -0.15 l 0.65 0.65 -0.65,0.65 -0.65,-0.65 0.65,-0.65 m 0,0.33 l 0.33,0.33 -0.33,0.33 -0.33,-0.33 0.33,-0.33 z"
      clip-rule="nonzero" />
  </clipPath>
</svg>

Для путей обрезки, которые применяются к обрезанным прямоугольникам, используется свойство CSS clip-rule для установки одного пути на использование правила nonzero , а другого — правила evenodd . Эти правила переопределяют значения атрибутов clip-path в SVG, которые намеренно установлены в противоположных значениях, так как CSS навязывает свои.

#clipper1 {
  clip-rule: nonzero;
}
#clipper2 {
  clip-rule: evenodd;
}

Поскольку и внутренняя, и внешняя части пути движутся по часовой стрелке (слева направо), форма результата обрезки будет отличаться для двух правил обрезки. Для nonzero, любой луч внутри внешней части фигуры будет иметь счётчик больше нуля, потому что он столкнётся с одним или несколькими фрагментами пути, движущимися слева направо. Для even-odd, точки между двумя частями пути будут иметь нечётное значение счётчика, а любая точка либо внутри внутреннего пути, либо вне внешней части, будет иметь чётное значение.

В этом примере используется тот же SVG, что и в предыдущем примере, с изменением, что внутренняя часть пути обрезки закручивается против часовой стрелки.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 50">
  <g stroke="#123" fill="#BCD">
    <!-- basic rectangle and clipping path visualization follow -->
    <rect x="10" y="10" width="30" height="30" />
    <path
      d="M 65,5 l 20,20 -20,20 -20,-20 20,-20 m 0,10 l 10,10 -10,10 -10,-10 10,-10 z"
      fill="none"
      stroke-width="0.5" />
    <!-- rectangles to be clipped follow -->
    <rect x="110" y="10" width="30" height="30" clip-path="url(#clipper1)" />
    <rect x="160" y="10" width="30" height="30" clip-path="url(#clipper2)" />
  </g>
  <!-- clipping paths follow -->
  <clipPath id="clipper1" clipPathUnits="objectBoundingBox">
    <path
      d="M 0.5 -0.15 l 0.65 0.65 -0.65,0.65 -0.65,-0.65 0.65,-0.65 m 0,0.33 l -0.33,0.33 0.33,0.33 0.33,-0.33 -0.33,-0.33 z" />
  </clipPath>
  <clipPath id="clipper2" clipPathUnits="objectBoundingBox">
    <path
      d="M 0.5 -0.15 l 0.65 0.65 -0.65,0.65 -0.65,-0.65 0.65,-0.65 m 0,0.33 l 0.33,0.33 -0.33,0.33 -0.33,-0.33 0.33,-0.33 z" />
  </clipPath>
</svg>

Мы применяем тот же CSS, что и раньше.

#clipper1 {
  clip-rule: nonzero;
}
#clipper2 {
  clip-rule: evenodd;
}

В этом случае, поскольку внешняя часть пути движется по часовой стрелке (слева направо), а внутренняя часть пути движется против часовой стрелки (справа налево), полученная форма обрезки будет одинаковой независимо от правила обрезки, которое используется.

• Атрибут SVG clip-rule
• Элемент SVG <clipPath>
• Свойство CSS clip-path