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 Kasten der Clipping-Maske wird ein Strahl in eine zufällige Richtung gezeichnet. Jedes Mal, wenn der Strahl einen Teil des Clip-Pfads schneidet, wird das Zählergebnis um eins erhöht, wenn sich der Teil des Clip-Pfads von links nach rechts über den Strahl bewegt, und um eins verringert, wenn sich der Teil des Pfads von rechts nach links über den Strahl bewegt. Wenn die endgültige Summe des Zählergebnisses null ist, befindet sich der Punkt außerhalb der Form des Pfads. Andernfalls ist er innerhalb der Form des Pfads.

even-odd

Für jeden Punkt im Kasten der Clipping-Maske wird ein Strahl in eine zufällige Richtung gezeichnet. Jedes Mal, wenn der Strahl einen Teil des Clippfads schneidet, wird das Zählergebnis um eins erhöht. Wenn die endgültige Summe des Zählergebnisses gerade ist, befindet sich der Punkt außerhalb der Form des Pfads; andernfalls ist er innerhalb der Form des Pfads. Null wird als gerade betrachtet.

Formale Syntax

clip-rule = 
  nonzero  |
  evenodd  

Beispiele

Wertvergleich

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

HTML

Das Markup enthält mehrere <svg> Container, die jeweils ein <clipPath> Element enthalten, das eine Sternform definiert, und ein <rect> Element, um den Stern darin zu zeichnen. Die Sterne werden mit sich überlappenden Linien erstellt. Abgesehen von der id ist das Markup der ersten beiden SVG-Elemente identisch. Das dritte SVG enthält nur das <path> Element und zeigt, 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 ist auf evenodd gesetzt; nonzero im zweiten SVG. Für das Pfad-alleinige SVG haben wir den Standardwert fill entfernt und sowohl eine stroke-Farbe als auch einen 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 der Definitionen von grundlegenden Formen

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. Wir fügen auch 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 stellen den <div> Elementen eine feste width und height zur Verfügung und fügen ihnen einen conic-gradient() für ihren 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 Clipping-Pfad für jedes <div> festzulegen:

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 jedes <clipPath> Element des <path>s:

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

Ergebnisse

Auswahl zwischen Regeln für einen Pfad mit nur im Uhrzeigersinn gezeichneten Pfaden

In diesem SVG-Bild haben wir zwei Rechtecke, die jeweils mit einer der beiden Clipping-Regeln ausgeschnitten sind. Es gibt zwei <clipPath> Elemente, sodass eines auf die nicht-null Regel gesetzt werden kann und das andere die Gerade-Ungerade-Regel verwendet. Beide Pfade sind für sowohl ihre inneren als auch äußeren Teile im Uhrzeigersinn 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>

Bei den Clipping-Pfaden, die auf die ausgeschnittenen Rechtecke angewendet werden, wird die CSS clip-rule Eigenschaft verwendet, um einen Pfad auf die nonzero Regeln und den anderen auf die evenodd Regeln zu setzen. Diese überschreiben die Werte der clip-path Attribute im SVG, die absichtlich auf die entgegengesetzten Werte zu den CSS-Einstellungen gesetzt wurden.

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

Da sowohl die inneren als auch äußeren Teile des Pfades im Uhrzeigersinn (von links nach rechts) verlaufen, wird die resultierende Clip-Form zwischen den beiden Clipping-Regeln unterschiedlich ausfallen. Für nonzero wird jeder Strahl im inneren Teil der Form auf einen Wert über Null aufaddiert, da er auf eines oder mehrere von links nach rechts verlaufende Pfadteile trifft. Für even-odd haben Punkte zwischen den zwei Teilen des Pfades eine ungerade Zählung, während jeder Punkt entweder innerhalb des inneren Pfades oder außerhalb des äußeren Teils eine gerade Zählung hat.

Auswahl zwischen Regeln für einen Pfad mit unterschiedlichen Wickelpfaden

Dieses Beispiel verwendet das gleiche SVG wie im vorherigen Beispiel, mit der Änderung, dass der innere Teil des Clippfads in eine entgegengesetzte Richtung 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 das gleiche CSS an wie zuvor.

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

In diesem Fall, da der äußere Teil des Pfades im Uhrzeigersinn (von links nach rechts) verläuft und der innere Teil des Pfades in eine entgegengesetzte Richtung verläuft, wird die resultierende Clip-Form unabhängig von der verwendeten Clipping-Regel gleich sein.

Spezifikationen

Browser-Kompatibilität

Siehe auch

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