„Schnittkantenproblem“ bei gekachelter Hintergrundgrafik mit quergestellter Schrift

[Gunnar Bittersmann]

@@pixxma

So in etwa?

Erklärung: Ich habe 3 (fast) identische SVGs als Hintergrundbilder verwendet, Data-URLs, prozentcodiert (die Rohform im Kommentar).

Nur zur Verdeutlichung sind sie unterschiedlich gefärbt (silver, red, black); bei dir bekommen sie dieselbe Farbe.

Damit die Rechnung einfacher wird, hab ich als Neigungsverhältnis für die Schrift ein ganzzahliges Verhältnis gewählt: ¼. Das ergibt einen Neigungswinkel von arctan ¼ ≈ 14°, der sich in transform="rotate(-14)" wiederfindet.

Damit genug Luft zwischen den Schriftzügen ist, ist das Seitenverhältnis Höhe : Breite der Textgrafiken nicht ¼, sondern ich habe sie doppelt so hoch gemacht; Seitenverhältnis also ½, was sich in viewBox="0 0 12 6" und background-size: 12em 6em wiederfindet.

Dem Neigungswinkel entsprechend sind die zweite und dritte Textgrafik so gegenüber der ersten verschoben, dass die Texte auf einer Linie stehen: background-position: 0 0, 8em -2em, 16em -4em