Einfache Muster zur Trennung (Besser als nur Farbe)

Farbe ist ziemlich gut, um Dinge zu trennen. Das ist im Grunde ein Tortendiagramm, oder? Man unterscheidet die Segmente anhand der Farbe. Mit genügend Farbkontrast ist man vielleicht OK, aber man kann (insbesondere im Hinblick auf Barrierefreiheit) noch besser mit Mustern oder einer Kombination davon abschneiden.

Patrick Dillon hat sich mit dem Tortendiagramm beschäftigt

Diagramme mit SVG-Mustern verbessern:

Wenn eines der Segmente mit mehr als nur Farbe gefüllt ist, ist es leichter zu erkennen [wer die Unabhängigen sind]

Siehe den Pen Political Party Affiliation – #2 von Patrick Dillon (@pdillon) auf CodePen.

Das Ausfüllen eines Tortendiagramm-Segments mit einem Muster ist (noch) keine übliche Funktion von Diagrammbibliotheken, aber wenn Ihre bevorzugte Bibliothek SVG-basiert ist, können Sie SVG-Muster implementieren.

Und zwar buchstäblich ein <pattern /> in SVG!

Hier ist ein einfaches Muster für horizontale Linien

<pattern 
    id="horzLines" 
    width="8" 
    height="4" 
    patternUnits="userSpaceOnUse">
       <line 
          x1="0" 
          y1="0" 
          x2="8" 
          y2="0" 
         style="stroke:#999;stroke-width:1.5" 
       />
</pattern>

Nun kann jedes SVG-Element dieses Muster als Füllung verwenden. Sogar Konturen. Hier ist ein Beispiel für die gemischte Verwendung von zwei einfachen Mustern

Siehe den Pen Simple Line Patterns von Chris Coyier (@chriscoyier) auf CodePen.

Das ist schön für die Füllung von SVG-Elementen, aber was ist mit HTML-Elementen?

Irene Ros hat Pattern Fills erstellt, die SVG-basiert, aber auch in CSS verwendbar sind.

SVG-Muster als Füllungen verwenden

Es gibt verschiedene Möglichkeiten, Pattern Fills zu verwenden

• Sie können die Datei patterns.css verwenden, die alle aktuellen Muster enthält. Das funktioniert nur für Nicht-SVG-Elemente.

• Sie können einzelne Muster verwenden, indem Sie sie von den Beispielseiten kopieren. CSS-Klassendefinitionen finden Sie hier und SVG-Musterdefinitionen finden Sie hier.

• Sie können eigene Muster hinzufügen oder meine modifizieren! Der Konvertierungsprozess von einem SVG-Dokument zu einem Muster ist sehr mühsam. Der Zweck der Pattern Fills Toolchain ist es, diesen Prozess zu vereinfachen. Sie können das Repository klonen, npm install und grunt dev ausführen, um einen lokalen Server zu starten. Danach werden alle Änderungen oder Ergänzungen an den Dateien src/patterns/**/* automatisch übernommen und die CSS-Datei sowie die Beispielseiten neu gerendert. Wenn Sie neue Muster erstellen, senden Sie sie bitte per Pull Request!

Hier wende ich sie auf SVG-Elemente an (aber es könnten genauso gut HTML-Elemente sein)

Siehe den Pen Practical Patterns von Chris Coyier (@chriscoyier) auf CodePen.

Die CSS-Nutzung erfolgt jedoch über Base64-Daten-URLs, sodass sie, wenn sie einmal dort sind, nicht mehr super handhabbar/veränderbar sind.

Hier ist Irene mit einem altmodischen Diagramm, das d3 verwendet

Verwaltung eines SVG-Musters in CSS

Wenn Ihre URL das SVG richtig kodiert, können Sie es direkt in CSS einfügen und es bleibt einigermaßen handhabbar.

Siehe den Pen Simple Line Patterns von Chris Coyier (@chriscoyier) auf CodePen.

Andere Beispiele zur Kombination von Farben

Hier ist eines von John Schulz

Siehe den Pen SVG Colored Patterns von Chris Coyier (@chriscoyier) auf CodePen.

Ricardo Marimón hat ein Beispiel, das das Muster in d3 erstellt. Das Muster sieht auf den Segmenten weitgehend gleich aus, aber vielleicht ist es ein Ansatzpunkt für Modifikationen.

Andere Musterquellen

Wir haben kürzlich eine ganze Menge davon zusammengetragen!