SVG-Mustertransformation: Füllung drehen, Umriss erhalten

Um ein SVG-Muster innerhalb einer festen Form zu drehen, setze patternTransform="rotate(...)" am pattern-Element. Lass die Transformation der Form selbst unverändert. Um die Lage der wiederholten Grafik zu verschieben, verwende stattdessen eine Verschiebung an demselben Muster.

Diese Änderungen bewegen das Farbkoordinatensystem. Das Drehen einer Gruppe mit der Form bewegt dagegen auch ihre angezeigte Geometrie. Unser selbst erstelltes hohles Emblem macht den Unterschied sichtbar: Der Umriss bleibt aufrecht, wenn sich die Farbe dreht. Ein separater Kontrollfall mit dem gesamten Objekt kippt hingegen Emblem und Öffnung.

Wähle das Element, das sich bewegen soll

Die aktuelle patternTransform-Referenz beschreibt eine auf die Musterkachel angewendete Transformationsliste. Die SVG2-Musterdefinition erklärt die Koordinatensysteme der Kachel und ihre Farbtransformation.

In diesem Beispiel ist das Motiv ein kleines asymmetrisches Winkelzeichen, das sich innerhalb einer 24 Einheiten großen Kachel wiederholt. Die Form, die diese Färbung erhält, ist ein anderer Pfad: ein asymmetrisches Abzeichen mit rechteckiger Öffnung. Diese Rollen getrennt zu halten macht die Bearbeitungsentscheidung klarer.

Wir verwenden das SVG-Attribut direkt. Der MDN-Hinweis zur Implementierung von CSS-Transformationen verspricht nicht, dass eine CSS-Eigenschaft namens pattern-transform an deinem Ziel funktioniert.

Füllung innerhalb des Umrisses drehen

Öffne eine vollständige Vorlage zum Drehen der Füllung

Speichere dieses SVG als pattern-emblem.svg und öffne es im Browser. Es ist eigenständig und benötigt weder externes Bild noch Bibliothek. Das Muster wird um 30 Grad um den Quellpunkt (100,80) gedreht. Die aufnehmende Gruppe besitzt keine Transformation.

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="160" viewBox="0 0 200 160">
  <defs>
    <pattern id="motif" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse" width="24" height="24" patternTransform="rotate(30 100 80)">
      <rect width="24" height="24" fill="#f4f0e4"/>
      <path d="M3 4 H15 V8 H9 V17 H3 Z" fill="#c15a38"/>
    </pattern>
  </defs>
  <g>
    <path id="emblem" d="M30 25 H130 L170 65 L140 135 H30 Z M65 60 H110 V100 H65 Z" fill="url(#motif)" fill-rule="evenodd"/>
  </g>
</svg>

Die Füllregel evenodd lässt das innere Rechteck offen. Die fill-rule-Referenz erklärt die kreuzungsbasierte Regel. Die Öffnung gehört zum Emblempfad. Deshalb dreht sich die Öffnung nicht mit, wenn die wiederholte Füllung gedreht wird.

Sowohl patternUnits als auch patternContentUnits sind in dieser Quelle ausdrücklich angegeben. Die patternUnits-Referenz definiert das Kachelkoordinatensystem. Unser Leitfaden zu Mustereinheiten behandelt Kachelabmessungen und Motivkoordinaten ausführlich. Hier halten wir sie fest, um die Transformation zu isolieren. Das ist keine Anleitung zum Entwerfen eines nahtlosen Rapports.

Vergleiche Drehung, Verschiebung und Geometriekontrolle

Erstelle drei Kopien der Vorlage und ändere nur das angegebene Attribut:

1. Entferne für die ursprüngliche Füllung patternTransform vom Muster.
2. Ersetze es für die verschobene Füllung durch patternTransform="translate(7 5)".
3. Entferne für den Ganzobjekt-Kontrollfall die Mustertransformation und ergänze transform="rotate(20 100 80)" am aufnehmenden g-Element.

Die verschobene Kopie behält die Motivrichtung, ändert aber seine Lage im Abzeichen. Ein Zeichen am Rand kann in die bemalte Form hinein- oder aus ihr herauswandern. Die gedrehte Kopie dreht Motiv und Wiederholungsgitter gemeinsam. Sie dreht nicht bloß jedes Motiv um seinen eigenen Mittelpunkt.

Für den Objektkontrollfall dokumentiert die transform-Attributreferenz die Drehung um einen gewählten Punkt. Diese Transformation ändert, wie die Gruppengeometrie angezeigt wird. Ihre gewöhnliche Musterfüllung bewegt sich mit. Benutzerraum-Mustereinheiten machen die Füllung dieses Beispiels nicht global ortsfest.

Beginne bei der Diagnose mit einer Transformation. Wenn du später Drehung, Verschiebung und Skalierung kombinierst, prüfe ihre Reihenfolge im SVG-Leitfaden zur Transformationsreihenfolge. Das Kombinieren von Transformationen führt eine separate Koordinatenfrage ein, die dieser kontrollierte Vergleich vermeidet.

Prüfe Geometrie und Pixel getrennt

Wir renderten die vier ursprünglichen Varianten in Chrome bei 200×160 und 400×320 CSS-Pixeln. Das Geräte-Pixelverhältnis des Browsers war 2. Jede Quelle wurde außerdem dekodiert und auf ein Canvas gezeichnet, dessen Pufferabmessungen der angegebenen Testgröße entsprachen. So konnten wir seine Pixel unabhängig vom Screenshot auslesen.

Jede Datei enthält dieselbe Emblem-d-Zeichenfolge und denselben Motivpfad: zwei Pfadelemente und kein Bildelement. Ihre vollständigen Datei-Hashes unterscheiden sich, weil ihre Transformationen verschieden sind. Der lokale Geometrierahmen des Emblems ist in jedem Fall (30,25,140,110).

Dieser lokale Rahmen allein würde die Ganzobjektänderung übersehen. Bei diesem polygonalen Emblem transformierten wir zusätzlich seine fünf äußeren Eckpunkte durch die tatsächliche Browsermatrix und maßen ihre angezeigte Ausdehnung. Die Tabelle normalisiert den größeren Viewport zurück auf Quelleinheiten:

Die normalisierten Ausdehnungen stimmten in beiden getesteten Größen überein. Der Objektkontrollfall behält dieselbe d-Zeichenfolge, doch seine angezeigte Geometrie ändert sich. Gleichheit der Quelldaten ist deshalb ein nützlicher Beleg für erhaltene Pfadkonstruktion, aber kein ausreichender Beleg dafür, dass der sichtbare Umriss an derselben Stelle blieb.

Bei den Varianten nur mit geänderter Füllung unterschieden sich die vollständigen Canvas-Pixelpuffer in jeder Größe vom Original. Am Quellpunkt (45,45) zeigte die ursprüngliche Probe den Kachelhintergrund (244,240,228) und die gedrehte Füllung das terrakottafarbene Motiv (193,90,56), beide mit Alpha 255. Die Verschiebung änderte diese einzelne Probe nicht, obwohl der gesamte Puffer anders war. Ein einzelner Abtastpunkt kann eine Farbverschiebung übersehen.

Bei Quellkoordinate (85,80) hatte die Öffnung in allen acht Fällen Alpha null. Die Grenzen vollständig undurchsichtiger Pixel blieben bei den drei aufrechten Varianten ebenfalls in jeder Größe unverändert. Diese schwellenwertbasierten Pixelgrenzen sind nicht dieselbe Messung wie die exakten Ausdehnungen der Kontureckpunkte. Diese Beobachtungen sind auf unsere selbst erstellte Quelle und den Browser begrenzt, kein Kompatibilitätszertifikat für Renderer.

Prüfe das gespeicherte Ziel vor der Übergabe

Behalte das ursprüngliche Emblem als Geometriereferenz und die Farbgestaltung in einer separaten Kopie. Eine wiederholende Farbquelle macht nicht jedes sichtbare Motiv zu einer eigenständigen Form, die ein nachgelagertes Schneidegerät oder ein Editor auswählen kann. Benötigt dieses Ziel umgewandelte Geometrie, bereite und prüfe diese Umwandlung separat. Der SVG-Bearbeitungsleitfaden behandelt umfassendere Quelländerungen.

Dreht sich der Umriss unerwartet, prüfe seine eigene Gruppe und die Transformationen der Vorfahren, bevor du das Muster anpasst. Teilen sich mehrere Inline-Kopien unerwartet dieselbe Farbgestaltung, gib ihren Muster-IDs und passenden Füllverweisen eindeutige Namen. Unsere Vergleichstestdatei isoliert diese IDs. Separate eigenständige SVG-Dateien teilen diesen dokumentweiten Ressourcennamensraum nicht.

Liegt dein eigenes Motiv oder Emblem nur als PNG oder JPG vor und brauchst du bearbeitbare Konturen, bereite mit PerfectVector ein SVG vor, prüfe Umriss und Öffnung und behalte eine saubere Masterdatei. Baue dann die Wiederholung auf und wähle ihre Farbtransformation im SVG-Code. Vektorisierung bereitet die Grafik vor. Sie entwirft weder den Rapport noch wählt sie seine Phasenlage oder garantiert die Musterverarbeitung eines Ziels. Vorhandene saubere Pfade können direkt zur Musterbearbeitung gehen. Der Vektorisierungsleitfaden erklärt, wann Rasterkonvertierung sinnvoll ist.

Häufige Fragen

Ändert patternTransform die Pfaddaten meines Emblems? In diesem Beispiel transformiert es die Musterfüllung. Die d-Zeichenfolge des Emblems bleibt unverändert. Prüfe auch die aufnehmende Gruppe und die Transformationen der Vorfahren. Angezeigte Geometrie kann sich bewegen, ohne d zu ändern.

Kann ich ein Muster verschieben, ohne es zu drehen? Ja. Die Variante translate(7 5) verschiebt die Füllung, während die Motivrichtung erhalten bleibt. Halte beim Test Kachelabmessungen und aufnehmende Geometrie fest.

Warum dreht sich das Muster mit, wenn ich die ganze Gruppe drehe? Die Gruppentransformation ändert die angezeigte aufnehmende Geometrie und ihre Füllung. Das ist eine andere Operation, als nur am pattern-Element eine Transformation zu setzen.

Sind die wiederholten Motive separate bearbeitbare Pfade? Unsere Quelle hat einen Motivpfad in einer Farbquelle und einen aufnehmenden Emblempfad. Die sichtbaren Wiederholungen sind keine separat erstellten Pfadelemente. Wandle sie separat um und prüfe sie, wenn dein Ziel diese Form benötigt.

Quellen

1. MDN – patternTransform – Mustertransformationslisten und Implementierungshinweis zum Attribut.
2. W3C – SVG2-Muster – Kachelkoordinatensysteme und Farbtransformation.
3. MDN – fill-rule – Gerade-Ungerade-Öffnung im aufnehmenden Pfad.
4. MDN – transform – Auf angezeigte Gruppengeometrie angewendete Drehung.
5. MDN – patternUnits – Das in diesem Vergleich festgehaltene ausdrückliche Kachelkoordinatensystem.