SVG-Mustereinheiten: Wiederholte Motive richtig skalieren

Um den Wiederholungsabstand eines SVG-Musters beim Ändern der Formabmessungen konstant zu halten, verwende patternUnits="userSpaceOnUse" und eine numerische Kachelbreite und -höhe. Steuere die Grafik innerhalb dieser Kachel separat mit patternContentUnits oder einem Muster-viewBox.

Dieser Unterschied ist wichtig, wenn ein kleines Motiv sowohl ein schmales Abzeichen als auch ein breites Banner füllt. Vielleicht möchtest du im Banner mehr Kopien, größere Lücken zwischen ihnen oder ein gestrecktes Motiv. Jede dieser Varianten ist eine andere Koordinatenentscheidung. Die gesamte Bannergruppe zu skalieren verändert das Ergebnis nochmals.

Wenn das Motiv bereits aus SVG-Pfaden besteht, behalte diese Pfade. Vektorisierung gehört früher in den Ablauf, wenn die einzige Quelle ein Rasterbild ist.

Die Kachel von ihrer Grafik unterscheiden

Ein Muster hat eine wiederholte rechteckige Kachel und darin gezeichneten Inhalt. patternUnits steuert x, y, width und height der Kachel. patternContentUnits steuert die Inhaltskoordinaten, sofern das Muster keinen viewBox hat.

Bei objectBoundingBox bedeutet eine Breite von .25 ein Viertel der Begrenzungsrahmenbreite des gefüllten Objekts. Es bedeutet nicht ein Viertel der Motivbreite. Ein 120 Einheiten breites Rechteck erhält eine 30 Einheiten breite Kachel; ein 240 Einheiten breites eine 60 Einheiten breite Kachel.

Der Inhaltsstandard bleibt userSpaceOnUse. Wenn du nur patternUnits änderst, können sich deshalb die Lücken zwischen Motiven ändern, während jedes Motiv gleich groß bleibt. Setze beide Attribute bewusst, statt anzunehmen, dass sie sich gemeinsam ändern.

Vier Versionen eines Blatts vergleichen

Wir haben die Blattpfade für dieses Beispiel gezeichnet und das SVG im Browser gerendert. Beide Zielrechtecke sind 80 Einheiten hoch; ihre Breiten betragen 120 und 240. Der Screenshot ergänzt Beschriftungen und Hintergründe um diese eigenen Formen. Er ist eine SVG-Demonstration, kein PerfectVector-Konvertierungsergebnis.

Lies die Reihen von oben nach unten:

1. Eine feste 40 × 40 große Kachel erzeugt drei Spalten im schmalen Rechteck und sechs im breiten. Die Blattabmessungen bleiben unverändert.
2. Eine Kachelbreite von .25 erhält in beiden Zielen vier Spalten. Das breitere Rechteck hat mehr Platz zwischen den Blättern, weil die Blattkoordinaten weiterhin Benutzereinheiten verwenden.
3. Inhaltskoordinaten im Begrenzungsrahmen strecken das Blatt horizontal, wenn sich die Zielbreite verdoppelt. Seine vertikale Größe bleibt gleich, weil sich die Zielhöhe nicht ändert.
4. Eine feste 40 × 40 große Kachel mit viewBox="0 0 40 40" kehrt zum Ergebnis der ersten Reihe zurück, obwohl patternContentUnits="objectBoundingBox" im Markup bleibt. Der Muster-viewBox hat Vorrang.

Das vollständige Beispiel öffnen

Speichere dies als pattern-units.svg und öffne es direkt in einem Browser. Die vier Reihen verwenden dieselben Definitionen wie die Abbildung, ohne deren Beschriftungen und Hintergründe. Jedes Rechteckpaar liegt in verschobenen Gruppen, sodass ihre lokalen Ursprünge vergleichbar sind.

<svg xmlns="http://www.w3.org/2000/svg" width="560" height="420" viewBox="0 0 560 420">
<defs>
  <pattern id="fixed" patternUnits="userSpaceOnUse" width="40" height="40">
    <path d="M8 24 Q8 6 30 8 Q30 26 8 24Z" fill="#127f70"/>
  </pattern>
  <pattern id="tile" patternUnits="objectBoundingBox" width=".25" height=".5">
    <path d="M8 24 Q8 6 30 8 Q30 26 8 24Z" fill="#127f70"/>
  </pattern>
  <pattern id="both" patternUnits="objectBoundingBox" patternContentUnits="objectBoundingBox" width=".25" height=".5">
    <path d="M.04 .30 Q.04 .08 .20 .10 Q.20 .33 .04 .30Z" fill="#127f70"/>
  </pattern>
  <pattern id="box" patternUnits="userSpaceOnUse" patternContentUnits="objectBoundingBox" width="40" height="40" viewBox="0 0 40 40">
    <path d="M8 24 Q8 6 30 8 Q30 26 8 24Z" fill="#127f70"/>
  </pattern>
</defs>
  <g transform="translate(20 20)"><rect width="120" height="80" fill="url(#fixed)"/></g>
  <g transform="translate(220 20)"><rect width="240" height="80" fill="url(#fixed)"/></g>
  <g transform="translate(20 120)"><rect width="120" height="80" fill="url(#tile)"/></g>
  <g transform="translate(220 120)"><rect width="240" height="80" fill="url(#tile)"/></g>
  <g transform="translate(20 220)"><rect width="120" height="80" fill="url(#both)"/></g>
  <g transform="translate(220 220)"><rect width="240" height="80" fill="url(#both)"/></g>
  <g transform="translate(20 320)"><rect width="120" height="80" fill="url(#box)"/></g>
  <g transform="translate(220 320)"><rect width="240" height="80" fill="url(#box)"/></g>
</svg>

Beginne mit dem Muster fixed und ändere nur die Breite des zweiten Rechtecks. Prüfe dann tile und both, bevor du einen Pfad änderst. So bleibt die Koordinatenwahl von der Grafik selbst getrennt. Für umfassendere Pfad- und Farbänderungen verwende den Leitfaden zum Bearbeiten eines SVG.

viewBox verwenden, wenn das Motiv eigene Koordinaten hat

Ein Muster-viewBox lässt das Blatt seinen vertrauten Zeichenbereich behalten, während die Kachel eine separate Größe hat. Die SVG-Musterspezifikation passt diesen Zeichenbereich mit viewBox und preserveAspectRatio in die Kachel ein.

In der letzten Reihe sind Kachel und viewBox beide 40 × 40 groß, weshalb kein Seitenverhältniskonflikt besteht. Wenn du die Kachel später rechteckig machst, erhält das standardmäßige preserveAspectRatio="xMidYMid meet" die Motivproportionen und zentriert den eingepassten Zeichenbereich. preserveAspectRatio="none" erlaubt unabhängige horizontale und vertikale Skalierung. Wähle das nur, wenn Verzerrung beabsichtigt ist.

Das Ändern von patternContentUnits behebt keine Größenprobleme, solange ein Muster-viewBox vorhanden ist: Dieses Attribut hat dann keine Wirkung. Ändere je nach gewünschter Wirkung Kachelabmessungen, viewBox oder dessen Seitenverhältnisregel.

Ein Muster ist hilfreich, wenn eine Definition eine wiederholte Füllung zeichnen soll. Wenn du stattdessen einzeln platzierte Kopien benötigst, passen SVG-Symbole und use-Instanzen direkter zu dieser Aufgabe.

Die Rechteckgröße zu ändern ist etwas anderes als seine Gruppe zu skalieren

userSpaceOnUse fixiert Abstände in Benutzerkoordinaten, nicht in dauerhaften Bildschirmpixeln. Eine Transformation kann diese Koordinaten einschließlich der Musterfüllung skalieren.

Wir haben außerdem zwei Versionen mit der Definition fixed oben geöffnet. Das erste Rechteck hatte width="240". Das zweite behielt width="120" in einer Gruppe mit transform="translate(20 120) scale(2 1)". Beide belegten in diesem Dokument 240 Bildschirmeinheiten, aber das erste zeigte sechs Blattspalten und das transformierte drei horizontal gestreckte Spalten.

Verwende diesen Unterschied bei der Fehlersuche in responsiven Grafiken:

• Um mehr Wiederholungen zu zeigen, vergrößere die Zielgeometrie bei unverändertem Koordinatenmaßstab.
• Um die gesamte Komposition zu vergrößern, skaliere die Gruppe und rechne damit, dass auch das Mustererscheinungsbild mitskaliert.
• Wenn ein Seitenlayout die Anzeigegröße des Wurzel-SVG ändert, prüfe dessen viewBox-Abbildung, bevor du die Musterattribute verantwortlich machst.

Die SVG-Spezifikation der Koordinatensysteme beschreibt Transformationen auf Benutzerkoordinaten. Prüfe bei einem Unterschied zwischen Anwendungen zuerst die Dokumentabmessungen des SVG; Mustereinheiten allein können keine physische Ausgabegröße festlegen.

Ein eigenes Motiv vor dem Wiederholen vorbereiten

Wenn dein Motiv nur als PNG oder JPG existiert, kann PerfectVector SVG-Geometrie für die Wiederholung rekonstruieren. Konvertiere das Motiv in Vektoren, öffne das Ergebnis in einem Editor und prüfe Kontur, kleine Zwischenräume und unerwünschte Hintergrundformen, bevor du es in ein Muster setzt.

Behalte eine separate SVG-Vorlage dieses Motivs. Baue die Kachel um eine Kopie auf und teste dann ein schmales und ein breites Ziel. Vorhandene Vektorgrafik kann direkt in diesen Bearbeitungsschritt gehen. Ein einfaches geometrisches Zeichen lässt sich möglicherweise schneller von Hand neu zeichnen, während ein Foto besser als Bild erhalten bleibt, statt in einen komplexen Satz von Pfaden nachgezeichnet zu werden.

Eine Browserdarstellung belegt nicht, dass jede Designanwendung die Musterdefinition erhält. Öffne die gespeicherte Datei erneut in der tatsächlichen Zielanwendung und prüfe dort Wiederholungsabstände und Motivform. Eine wiederholte Füllung erzeugt außerdem keine unabhängigen bearbeitbaren Kopien jedes sichtbaren Blatts. Der Leitfaden zu SVG-Dateien erklärt, warum neben dem Erscheinungsbild auch die Dokumentstruktur wichtig ist.

Prüfe vor der Übergabe, ob jedes fill="url(#...)" auf eine vorhandene eindeutige Muster-ID zeigt, die Kachel positive Abmessungen hat und das Motiv in seine vorgesehene Kachel passt. SVG-Muster beschneiden Inhalte normalerweise an der Kachelgrenze. Ein Blatt, das über eine Kante ragt, benötigt deshalb eine bewusst gestaltete Wiederholung statt der Annahme, dass der Überlauf erscheinen wird.

FAQ

Warum änderte sich mein Abstand, während das Blatt gleich groß blieb? patternUnits steuert Kachelabmessungen, während patternContentUnits die Grafikkoordinaten steuert. Eine Begrenzungsrahmenkachel mit standardmäßigem Inhalt in Benutzerkoordinaten kann ihre Abstände ändern, ohne das Blatt zu skalieren.

Warum scheint patternContentUnits nichts zu tun? Prüfe, ob das Muster einen viewBox hat. Wenn einer vorhanden ist, definiert er die Inhaltskoordinatenabbildung, und patternContentUnits hat keine Wirkung.

Hält userSpaceOnUse das Muster auf dem Bildschirm gleich groß? Es hält numerische Kachelabmessungen im aktuellen Benutzerkoordinatensystem des Ziels. Das Skalieren einer Gruppe oder das Ändern der Koordinatenabbildung auf den Darstellungsbereich des Wurzel-SVG kann die angezeigte Mustergröße weiterhin ändern.

Quellen

1. MDN — patternUnits — Definiert Koordinaten der Kachelgeometrie und den Begrenzungsrahmenstandard.
2. MDN — patternContentUnits — Definiert Inhaltskoordinaten und den Vorrang von viewBox.
3. W3C — SVG-Muster — Erklärt Kacheleinpassung, Seitenverhältnisverhalten und Musterbeschneidung.
4. W3C — SVG-Koordinatensysteme — Definiert die Benutzerkoordinatentransformationen hinter Gruppenskalierung.

Du hast ein Motiv zum Wiederverwenden nur als Rasterbild? Verwandle dein Bild in SVG-Pfade, prüfe die rekonstruierte Kontur und teste sie in beiden Zielgrößen, bevor du die fertige Wiederholung erstellst.