clip-rule

Syntax

/* Keywords */
clip-rule: nonzero;
clip-rule: evenodd;

/* Global values */
clip-rule: inherit;
clip-rule: initial;
clip-rule: revert;
clip-rule: revert-layer;
clip-rule: unset;

Werte

nonzero

Für jeden Punkt im Maskenrahmen wird ein Strahl in eine zufällige Richtung gezeichnet. Jedes Mal, wenn der Strahl einen Teil des Pfads schneidet, wird ein Zähler um eins erhöht, wenn der Teil des Pfads sich von links nach rechts über den Strahl bewegt, und verringert sich um eins, wenn der Teil des Pfads sich von rechts nach links über den Strahl bewegt. Ist das Endergebnis des Zählers null, liegt der Punkt außerhalb der Form des Pfads. Andernfalls liegt er innerhalb der Form des Pfads.

even-odd

Für jeden Punkt im Maskenrahmen wird ein Strahl in eine zufällige Richtung gezeichnet. Jedes Mal, wenn der Strahl einen Teil des Pfads schneidet, wird ein Zähler um eins erhöht. Ist das Endergebnis des Zählers gerade, liegt der Punkt außerhalb der Form des Pfads; andernfalls liegt er innerhalb der Form des Pfads. Null wird als gerade betrachtet.

Formale Syntax

clip-rule = 
  nonzero  |
  evenodd  

Beispiele

Wertvergleich

In diesem Beispiel wenden wir verschiedene CSS clip-rule-Werte auf ähnliche SVG <path>-Elemente an, um den Unterschied zwischen evenodd und non-zero zu demonstrieren.

HTML

Das Markup enthält mehrere <svg>-Container, von denen jeder ein <clipPath>-Element zur Definition einer Sternform sowie ein <rect>-Element zum Zeichnen des Sterns enthält. Die Sterne werden mit sich überschneidenden Linien erstellt. Abgesehen von der id ist das Markup der ersten beiden SVG-Elemente identisch. Das dritte SVG enthält nur das <path>-Element, um zu zeigen, wie die Linien des Pfads, die den Stern erstellt haben, sich überlappen.

<svg>
  <clipPath id="star1">
    <path d="M50,0 21,90 98,35 2,35 79,90z" />
  </clipPath>
  <rect clip-path="url(#star1)" width="95" height="95" />
</svg>

<svg>
  <clipPath id="star2">
    <path d="M50,0 21,90 98,35 2,35 79,90z" />
  </clipPath>
  <rect clip-path="url(#star2)" width="95" height="95" />
</svg>

<svg id="star3">
  <path d="M50,0 21,90 98,35 2,35 79,90z" />
</svg>

CSS

Die clip-rule für das <path> im ersten SVG wird auf evenodd gesetzt; nonzero im zweiten SVG. Für das SVG mit nur dem Pfad haben wir die Standard-fill entfernt und sowohl eine stroke-Farbe als auch eine stroke-width definiert, um die sich überlappenden Pfadlinien sichtbar zu machen:

body {
  display: flex;
  gap: 20px;
}
svg {
  width: 110px;
  height: 110px;
}

#star1 path {
  clip-rule: evenodd;
}

#star2 path {
  clip-rule: nonzero;
}

#star3 path {
  fill: none;
  stroke: black;
  stroke-width: 1;
}

Ergebnisse

Innerhalb von Basic-Shape-Definitionen

Dieses Beispiel zeigt, dass während die clip-rule keine Auswirkungen auf CSS-<basic-shape>s hat, sie ein <clipPath> beeinflussen kann, das als Quelle einer Form verwendet wird.

HTML

Wir fügen ein SVG mit zwei <clipPath>-Elementen ein, die Sternformen definieren, die bis auf ihre id-Attributwerte identisch sind. Außerdem fügen wir zwei <div>-Elemente ein, die unsere Sternformen enthalten werden.

<svg height="0" width="0">
  <defs>
    <clipPath id="star1">
      <path d="M100,0 42,180 196,70 4,70 158,180z" />
    </clipPath>
    <clipPath id="star2">
      <path d="M100,0 42,180 196,70 4,70 158,180z" />
    </clipPath>
  </defs>
</svg>

<div></div>
<div></div>

CSS

Wir geben den <div>-Elementen eine festgelegte width und height und fügen einen conic-gradient() für den background-image-Wert hinzu:

body {
  display: flex;
  gap: 20px;
}

div {
  height: 200px;
  width: 200px;
  background-image: conic-gradient(
    at center,
    rebeccapurple,
    green,
    lightblue,
    rebeccapurple
  );
}

Wir verwenden die clip-path-Eigenschaft, um die verschiedenen <clipPath>-Elemente als Schnittpfad für jedes <div> zu setzen:

div:first-of-type {
  clip-path: url("#star1");
}
div:last-of-type {
  clip-path: url("#star2");
}

Schließlich setzen wir die verschiedenen clip-rule-Werte für die <path>s der einzelnen <clipPath>-Elemente:

#star1 path {
  clip-rule: evenodd;
}
#star2 path {
  clip-rule: nonzero;
}

Ergebnisse

Auswahl zwischen Regeln für einen Pfad mit ausschließlich im Uhrzeigersinn verlaufenden Pfaden

In diesem SVG-Bild haben wir zwei Rechtecke, die jeweils mit einer der beiden Schnittregeln beschnitten sind. Es gibt zwei <clipPath>-Elemente, von denen eines auf die Non-Zero-Schnittregel und das andere auf die Even-Odd-Regel eingestellt wird. Beide Pfade werden im Uhrzeigersinn für sowohl den inneren als auch den äußeren Teil gezeichnet.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 50">
  <g stroke="#112233" fill="#bbccdd">
    <!-- 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>

Auf die Schnittpfade, die auf die beschnittenen Rechtecke angewandt werden, wird die CSS clip-rule-Eigenschaft genutzt, um einen Pfad auf die nonzero-Regeln und den anderen auf die evenodd-Regel festzulegen. Diese überschreiben die Werte der clip-path-Attribute im SVG, die absichtlich auf entgegengesetzte Werte gesetzt wurden, als die CSS sie auferlegt.

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

Da sowohl die inneren als auch die äußeren Teile des Pfads im Uhrzeigersinn (von links nach rechts) verlaufen, wird die resultierende Schnittform zwischen den beiden Schneidregeln unterschiedlich sein. Für nonzero wird jeder Strahl innerhalb des äußeren Teils der Form zu einem Wert über null summiert, da er auf ein oder mehrere von links nach rechts verlaufende Pfadfragmente treffen wird. Für even-odd haben Punkte zwischen den beiden Teilen des Pfads eine ungerade Zahl an Zählern, während jeder Punkt entweder innerhalb des inneren Pfads oder außerhalb des äußeren Teils eine gerade Zahl an Zählern haben wird.

Auswahl zwischen Regeln für einen Pfad mit unterschiedlichen Wicklungspfaden

Dieses Beispiel verwendet dasselbe SVG wie das vorherige Beispiel, mit der Änderung, dass der innere Teil des Pfads in umgekehrter Richtung im Uhrzeigersinn verläuft.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 50">
  <g stroke="#112233" fill="#bbccdd">
    <!-- 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>

Wir wenden dieselbe CSS wie zuvor an.

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

In diesem Fall wird, da der äußere Teil des Pfads im Uhrzeigersinn (von links nach rechts) und der innere Teil des Pfads gegen den Uhrzeigersinn (von rechts nach links) verläuft, die resultierende Schnittform unabhängig von der verwendeten Schneidregel gleich sein.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• fill-rule
• clip-path
• Einführung in CSS-Clipping
• CSS-Masking-Modul
• SVG-Attribut clip-rule
• SVG-Element <clipPath>
• SVG-Attribut fill-rule