SVG-ClipPath-Einheiten: Eine Form an ihr Ziel anpassen

Verwende clipPathUnits="objectBoundingBox", wenn sich eine Beschneidungsform mit den Begrenzungen des Ziels strecken soll. Normalisiere zuerst ihre Koordinaten. Verwende userSpaceOnUse, wenn du explizite Platzierung oder eine gleichmäßige Skalierung benötigst, die die Proportionen der Form erhält.

Das Attribut allein zu ändern konvertiert einen in Hunderten von Einheiten gezeichneten Pfad nicht in eine Form zwischen null und eins. Es kann fast die gesamte Beschneidung außerhalb des Ziels verschieben. Dieser Leitfaden verwendet eine eigene Lesezeichen-Silhouette, um die Koordinatenänderung, die entstehende Verzerrung und eine zentrierte Einpassung zu zeigen, die die rautenförmige Aussparung quadratisch erhält.

Beschneidung steuert Sichtbarkeit. Sie kürzt die zugrunde liegenden Pfade nicht zu neuer bearbeitbarer Geometrie. Wenn du bereits eine saubere SVG-Silhouette hast, verwende sie direkt; Nachzeichnen ist nur relevant, wenn du diese Silhouette aus einem Rasterbild rekonstruieren musst.

Das Koordinatensystem vor dem Skalieren wählen

Der Standard ist userSpaceOnUse. Seine Beschneidungskoordinaten gehören zum Benutzerkoordinatensystem des Elements, das die Beschneidung referenziert. Bei objectBoundingBox wird die obere linke Begrenzung des Ziels auf (0, 0) und die untere rechte auf (1, 1) abgebildet. Siehe die clipPathUnits-Referenz.

Der Begrenzungsrahmen des Ziels ist nicht unbedingt der viewBox des äußeren SVG. Eine Gruppe zu beschneiden verwendet deren Begrenzungen, die sich von einem Rechteck darin unterscheiden können. Wende die Beschneidung für einen vorhersehbaren ersten Test direkt auf ein Rechteck mit bekannten Abmessungen an.

Ein breites und ein hohes Ziel vergleichen

Die äußeren Begrenzungen unseres Lesezeichens sind x=20, y=10, width=100, height=100. Seine Raute ist ein zweiter Teilpfad innerhalb desselben Pfads. Der Test wendet es auf Rechtecke mit 200 × 120 und 120 × 200 in lokalen SVG-Einheiten an.

Die mittlere Spalte füllt die Begrenzungen jedes Ziels, aber ihre Raute wird breit oder hoch. Die rechte Spalte erhält Raute und untere Kerbe und lässt entlang der längeren Zielachse Platz. Alle sechs Aussparungen bleiben transparent.

Speichere das vollständige Beispiel unten als clippath-comparison.svg und öffne es in einem Browser. Die Spalten folgen der Bildreihenfolge. Die obere Reihe verwendet breite Rechtecke; die untere hohe. Die Anzeigeverschiebungen ordnen die Muster an und verändern ihre lokalen Zielabmessungen nicht.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 470">
  <defs>
    <path id="silhouette" d="M20 10H120V110L70 85L20 110Z M70 30L85 45L70 60L55 45Z"/>
    <clipPath id="fixed" clipPathUnits="userSpaceOnUse">
      <use href="#silhouette" clip-rule="evenodd"/>
    </clipPath>
    <clipPath id="box" clipPathUnits="objectBoundingBox">
      <use href="#silhouette" clip-rule="evenodd"
        transform="matrix(.01 0 0 .01 -.2 -.1)"/>
    </clipPath>
    <clipPath id="wide-fit" clipPathUnits="userSpaceOnUse">
      <use href="#silhouette" clip-rule="evenodd"
        transform="matrix(1.2 0 0 1.2 16 -12)"/>
    </clipPath>
    <clipPath id="tall-fit" clipPathUnits="userSpaceOnUse">
      <use href="#silhouette" clip-rule="evenodd"
        transform="matrix(1.2 0 0 1.2 -24 28)"/>
    </clipPath>
  </defs>
  <g fill="#107c86">
    <rect x="0" y="0" width="200" height="120"
      transform="translate(20 30)" clip-path="url(#fixed)"/>
    <rect x="0" y="0" width="200" height="120"
      transform="translate(260 30)" clip-path="url(#box)"/>
    <rect x="0" y="0" width="200" height="120"
      transform="translate(500 30)" clip-path="url(#wide-fit)"/>
    <rect x="0" y="0" width="120" height="200"
      transform="translate(60 230)" clip-path="url(#fixed)"/>
    <rect x="0" y="0" width="120" height="200"
      transform="translate(300 230)" clip-path="url(#box)"/>
    <rect x="0" y="0" width="120" height="200"
      transform="translate(540 230)" clip-path="url(#tall-fit)"/>
  </g>
</svg>

Die petrolfarbene Füllung gehört zu den Rechtecken. Der Beschneidungspfad liefert ihre sichtbare Kontur. Der Screenshot ergänzt Beschriftungen und ein Schachbrett um dieses SVG; die eigenständige Datei selbst hat einen transparenten Hintergrund.

Die Quellbegrenzungen einschließlich ihres Ursprungs normalisieren

Berechne für einen Punkt (x, y) in einer Quelle mit den Begrenzungen (minX, minY, width, height):

normalizedX = (x - minX) / width
normalizedY = (y - minY) / height

Hier sind das (x - 20) / 100 und (y - 10) / 100. Die Matrix in der Definition box führt beide Operationen aus, ohne die Pfaddaten umzuschreiben:

matrix(0.01 0 0 0.01 -0.2 -0.1)

Sie bildet (20, 10) auf (0, 0) und (120, 110) auf (1, 1) ab. Durch 100 zu teilen, ohne den Ursprung abzuziehen, würde die Form innerhalb des Ziels versetzt lassen. Die Begrenzungsrahmenabbildung skaliert das normalisierte Ergebnis anschließend unabhängig entlang der Zielbreite und -höhe.

Verwende die tatsächlichen Begrenzungen der Geometrie, die du normalisieren möchtest. Ein viewBox kann bewussten Leerraum enthalten, weshalb seine Abmessungen nicht den Begrenzungen der Silhouette entsprechen müssen. Wenn du diesen Leerraum erhalten willst, verwende bewusst das viewBox-Rechteck, statt die beiden Messungen versehentlich zu vermischen.

Miss und normalisiere bei importierter Grafik mit verschachtelten Transformationen in einem einheitlichen Koordinatensystem. Löse diese Transformationen in einem Editor auf, bevor du rohe Pfaddaten kopierst, wenn du sie nicht sicher berücksichtigen kannst. Der Ablauf zur SVG-Bearbeitung behandelt das Prüfen von Pfaden und Gruppen vor der Übergabe.

Proportionen mit einem Skalierungsfaktor erhalten

Verwende für ein Zielrechteck bei lokal (0, 0) mit Breite W und Höhe H:

s  = min(W / width, H / height)
tx = (W - s * width) / 2 - s * minX
ty = (H - s * height) / 2 - s * minY
matrix(s 0 0 s tx ty)

Das breite Ziel ergibt s=1.2, tx=16 und ty=-12. Seine Beschneidung belegt x=40..160 und y=0..120. Das hohe Ziel ergibt s=1.2, tx=-24 und ty=28, wodurch die Beschneidung bei x=0..120 und y=40..160 liegt.

Das sind explizit angegebene Matrizen in userSpaceOnUse. Berechne sie deshalb neu, wenn sich die lokalen Zielabmessungen ändern. Das gesamte SVG lediglich in einer anderen CSS-Größe anzuzeigen skaliert die Komposition gemeinsam. Ein Rechteck darin von breit zu hoch zu ändern ist eine andere Operation.

Diese Berechnung setzt Quellbreite und -höhe ungleich null sowie keine unberücksichtigte Drehung oder Scherung voraus. Es ist ein Einpassen innerhalb des Ziels: Freier Platz ist zu erwarten. Strecken mit Begrenzungsrahmeneinheiten ist geeignet, wenn das Füllen des Ziels wichtiger ist als der Erhalt der Motivproportionen.

Die Aussparung in der Beschneidungsgeometrie erhalten

Das Beispiel setzt clip-rule="evenodd" auf jedes use innerhalb seines clipPath. Der referenzierte Pfad enthält sowohl das äußere Lesezeichen als auch den Rauten-Teilpfad. Die Regel bestimmt, welche Bereiche dieser zusammengesetzten Form innerhalb der Beschneidung liegen.

clip-rule am petrolfarbenen Rechteck festzulegen setzt nicht die Regel der Beschneidungsform. Ebenso ersetzt eine zum Zeichnen der Quelle verwendete fill-rule nicht die Beschneidungsregel. MDNs clip-rule-Referenz erklärt ihren Geltungsbereich innerhalb eines clipPath.

Füge keine separate weiße Raute hinzu und erwarte, dass sie von der Beschneidung abgezogen wird. Die Silhouetten der untergeordneten Elemente in einem Beschneidungspfad werden zu einem sichtbaren Bereich kombiniert; ihre Farben wirken nicht als Schwarz-Weiß-Maskenwerte. Verwende für eine Aussparung wie diese den zusammengesetzten Pfad und seine vorgesehene Windungsregel. Der Leitfaden zu gefüllten SVG-Aussparungen erklärt die zugrunde liegende Pfadstruktur.

Wenn dein Design teilweise transparente Kanten oder luminanzbasierte Sichtbarkeit benötigt, vergleiche clipPath und SVG-Maske am selben Bild. Eine Beschneidung eignet sich für eine geometrische Grenze; eine Maske bietet ein anderes Sichtbarkeitsmodell. Für ein durch CSS gezeichnetes einfarbiges Icon lies den Leitfaden zu SVG-CSS-Masken.

Begrenzungen und exportiertes Ergebnis prüfen

Eine horizontale oder vertikale Linie kann einen geometrischen Begrenzungsrahmen mit Höhe oder Breite null haben, auch wenn ihre Kontur sichtbar ist. Vermeide objectBoundingBox bei solchen Zielen und teile beim Normalisieren nicht durch eine Quelldimension von null. Die SVG-Koordinatenspezifikation schließt die Konturbreite aus dieser Begrenzungsrahmenberechnung aus und warnt vor diesen entarteten Fällen.

Vor der Übergabe:

1. Bestätige, dass die referenzierte Beschneidungs-ID existiert und im Dokument eindeutig ist.
2. Vergleiche breite und hohe Ziele einschließlich der kleinsten Aussparung.
3. Prüfe Quell- und Zielbegrenzungen in ihren vorgesehenen Koordinatensystemen.
4. Speichere das exportierte SVG und öffne es erneut in der Anwendung, die es verwenden wird.
5. Behalte die ursprüngliche Geometrie, wenn die Beschneidung bearbeitbar bleiben muss.

Die CSS-Masking-Spezifikation legt fest, dass Beschneidung die Darstellung verändert, nicht die eigentliche Geometrie des Elements. Eine Schneid- oder Geometrieverarbeitungsanwendung benötigt deshalb möglicherweise eine tatsächliche Pfadschnittmenge oder eine andere Editoroperation. Bestätige die entstehenden Pfade in dieser Anwendung; eine korrekte Browservorschau allein belegt keine schneidfertige Datei.

Bei Bedarf eine Rastersilhouette rekonstruieren

PerfectVector eignet sich, wenn ein eigenes Motiv nur als PNG oder JPG erhalten ist und du bearbeitbare Konturen für die Beschneidung benötigst. Konvertiere dieses Bild in SVG und prüfe dann äußere Kante, innere Aussparungen und unerwünschte Hintergrundformen, bevor du die Silhouette extrahierst. Wähle aus, welche Konturen zur Beschneidung gehören; die Quellfarben definieren keine unterschiedlichen Beschneidungsstärken.

Behalte eine vorhandene Vektorvorlage, wenn du eine hast. Ein einfaches geometrisches Lesezeichen lässt sich direkt zeichnen, wie in diesem Beispiel. Die Vektorisierung wählt weder Beschneidungseinheiten noch normalisiert sie Begrenzungen oder führt einen dauerhaften booleschen Zuschnitt aus. Für umfassendere Hinweise zur Quellenwahl lies den Überblick zur Bildvektorisierung.

FAQ

Erhält objectBoundingBox die Proportionen der Form? Nein. Es bildet die normalisierte Beschneidung unabhängig auf Breite und Höhe des Ziels ab. Verwende eine gleichmäßige Skalierung in userSpaceOnUse, wenn die Silhouette ihre Proportionen behalten muss.

Warum verbirgt das Ändern von clipPathUnits meine Form? Die Pfadkoordinaten können noch in den ursprünglichen Quelleinheiten vorliegen. Normalisiere sie auf das zielrelative Koordinatensystem, einschließlich des Quellursprungs, oder behalte userSpaceOnUse und positioniere sie ausdrücklich.

Löscht Beschneidung die verborgenen Teile meines SVG? Nein. Beschneidung verändert, was dargestellt wird, und erhält dabei die zugrunde liegende Geometrie. Verwende eine passende Pfadbearbeitungsoperation, wenn die Übergabedatei dauerhaft gekürzte Konturen benötigt.

Quellen

1. MDN — clipPathUnits — Koordinatenoptionen und die standardmäßige Interpretation im Benutzerkoordinatensystem.
2. MDN — clip-rule — Platzierung der Windungsregel innerhalb von Beschneidungspfaden.
3. W3C — SVG-Koordinatensysteme — Begrenzungsrahmenabbildung, Ausschluss der Kontur und Einschränkungen bei Nulldimensionen.
4. W3C — CSS Masking — Beschneidungsgeometrie, kombinierte Silhouetten und unveränderte zugrunde liegende Pfade.

Wenn deine Beschneidung mit einem Rastermotiv beginnt, bereite sein SVG mit PerfectVector vor, prüfe Silhouette und Aussparungen und teste dann beide Zielproportionen, bevor du Strecken oder gleichmäßiges Einpassen wählst.