mistangl/platz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

SVG-Raumplan: Platzzahl je Tisch, Hover-Infos und Bild vor der Liste

Browse Source 
- Platzzahl unter der Tischnummer im SVG
- Personenkreise mit <title> (Name - Gruppe) und data-Attributen
  (gruppe/name/gid); im Web den Raumplan inline statt als <img>
  einbetten, dazu ein Kasten mit der Gruppen-Namensliste und
  Hervorhebung der Gruppe beim Hover
- Ausgabe: Raumplan vor der Tabellenliste (schneller Varianten-Vergleich)
- SVG als UTF-8 schreiben (Umlaute/Gedankenstrich sonst ungueltig)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Michael Stangl
2026-07-15 17:30:33 +02:00
parent 4a059f32c5
commit b29b3b22d4
19 changed files with 1862 additions and 1653 deletions
Download Patch File Download Diff File Expand all files Collapse all files
doc/images/drei_tische_kette_paare.svg
+15 -12
View File
@@ -2,18 +2,21 @@
<svg xmlns="http://www.w3.org/2000/svg" width="251.2" height="90.4" viewBox="0 0 251.2 90.4">
<rect width="100%" height="100%" fill="white"/>
<circle cx="45.2" cy="45.2" r="35.2" fill="white" stroke="black" stroke-width="1.5"/>
<circle cx="45.2" cy="32" r="12" fill="#e6194b" stroke="black" stroke-width="1"/>
<circle cx="45.2" cy="58.4" r="12" fill="#e6194b" stroke="black" stroke-width="1"/>
<circle cx="45.2" cy="45.2" r="12" fill="white" fill-opacity="0.75"/>
<text x="45.2" y="45.2" text-anchor="middle" dominant-baseline="central" font-size="13.2" font-weight="bold" fill="black">0</text>
<circle class="person" data-gid="1" data-gruppe="Gruppe 1" data-name="Vorname1 Nachname1" cx="45.2" cy="32" r="12" fill="#e6194b" stroke="black" stroke-width="1"><title>Vorname1 Nachname1 — Gruppe 1</title></circle>
<circle class="person" data-gid="1" data-gruppe="Gruppe 1" data-name="Vorname2 Nachname2" cx="45.2" cy="58.4" r="12" fill="#e6194b" stroke="black" stroke-width="1"><title>Vorname2 Nachname2 — Gruppe 1</title></circle>
<ellipse cx="45.2" cy="45.2" rx="12" ry="15.6" fill="white" fill-opacity="0.75"/>
<text x="45.2" y="40.4" text-anchor="middle" dominant-baseline="central" font-size="13.2" font-weight="bold" fill="black">0</text>
<text x="45.2" y="53.6" text-anchor="middle" dominant-baseline="central" font-size="7.44" fill="#333">2 Pl.</text>
<circle cx="125.6" cy="45.2" r="35.2" fill="white" stroke="black" stroke-width="1.5"/>
<circle cx="125.6" cy="32" r="12" fill="#3cb44b" stroke="black" stroke-width="1"/>
<circle cx="125.6" cy="58.4" r="12" fill="#3cb44b" stroke="black" stroke-width="1"/>
<circle cx="125.6" cy="45.2" r="12" fill="white" fill-opacity="0.75"/>
<text x="125.6" y="45.2" text-anchor="middle" dominant-baseline="central" font-size="13.2" font-weight="bold" fill="black">0</text>
<circle class="person" data-gid="2" data-gruppe="Gruppe 2" data-name="Vorname3 Nachname3" cx="125.6" cy="32" r="12" fill="#3cb44b" stroke="black" stroke-width="1"><title>Vorname3 Nachname3 — Gruppe 2</title></circle>
<circle class="person" data-gid="2" data-gruppe="Gruppe 2" data-name="Vorname4 Nachname4" cx="125.6" cy="58.4" r="12" fill="#3cb44b" stroke="black" stroke-width="1"><title>Vorname4 Nachname4 — Gruppe 2</title></circle>
<ellipse cx="125.6" cy="45.2" rx="12" ry="15.6" fill="white" fill-opacity="0.75"/>
<text x="125.6" y="40.4" text-anchor="middle" dominant-baseline="central" font-size="13.2" font-weight="bold" fill="black">0</text>
<text x="125.6" y="53.6" text-anchor="middle" dominant-baseline="central" font-size="7.44" fill="#333">2 Pl.</text>
<circle cx="206" cy="45.2" r="35.2" fill="white" stroke="black" stroke-width="1.5"/>
<circle cx="206" cy="32" r="12" fill="#4363d8" stroke="black" stroke-width="1"/>
<circle cx="206" cy="58.4" r="12" fill="#4363d8" stroke="black" stroke-width="1"/>
<circle cx="206" cy="45.2" r="12" fill="white" fill-opacity="0.75"/>
<text x="206" y="45.2" text-anchor="middle" dominant-baseline="central" font-size="13.2" font-weight="bold" fill="black">0</text>
<circle class="person" data-gid="3" data-gruppe="Gruppe 3" data-name="Vorname5 Nachname5" cx="206" cy="32" r="12" fill="#4363d8" stroke="black" stroke-width="1"><title>Vorname5 Nachname5 — Gruppe 3</title></circle>
<circle class="person" data-gid="3" data-gruppe="Gruppe 3" data-name="Vorname6 Nachname6" cx="206" cy="58.4" r="12" fill="#4363d8" stroke="black" stroke-width="1"><title>Vorname6 Nachname6 — Gruppe 3</title></circle>
<ellipse cx="206" cy="45.2" rx="12" ry="15.6" fill="white" fill-opacity="0.75"/>
<text x="206" y="40.4" text-anchor="middle" dominant-baseline="central" font-size="13.2" font-weight="bold" fill="black">0</text>
<text x="206" y="53.6" text-anchor="middle" dominant-baseline="central" font-size="7.44" fill="#333">2 Pl.</text>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 2.7 KiB

doc/images/sechs_tische_kreis_dreiergruppen.svg
+30 -24
View File
@@ -6,33 +6,39 @@
<polyline points="206,125.6 125.6,32" fill="none" stroke="#4363d8" stroke-width="12" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="0.5"/>
<polyline points="125.6,58.4 45.2,125.6" fill="none" stroke="#f58231" stroke-width="12" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="0.5"/>
<circle cx="125.6" cy="366.8" r="35.2" fill="white" stroke="black" stroke-width="1.5"/>
<circle cx="125.6" cy="353.6" r="12" fill="#e6194b" stroke="black" stroke-width="1"/>
<circle cx="125.6" cy="380" r="12" fill="#3cb44b" stroke="black" stroke-width="1"/>
<circle cx="125.6" cy="366.8" r="12" fill="white" fill-opacity="0.75"/>
<text x="125.6" y="366.8" text-anchor="middle" dominant-baseline="central" font-size="13.2" font-weight="bold" fill="black">0</text>
<circle class="person" data-gid="4" data-gruppe="Gruppe 4" data-name="Vorname10 Nachname10" cx="125.6" cy="353.6" r="12" fill="#e6194b" stroke="black" stroke-width="1"><title>Vorname10 Nachname10 — Gruppe 4</title></circle>
<circle class="person" data-gid="3" data-gruppe="Gruppe 3" data-name="Vorname7 Nachname7" cx="125.6" cy="380" r="12" fill="#3cb44b" stroke="black" stroke-width="1"><title>Vorname7 Nachname7 — Gruppe 3</title></circle>
<ellipse cx="125.6" cy="366.8" rx="12" ry="15.6" fill="white" fill-opacity="0.75"/>
<text x="125.6" y="362" text-anchor="middle" dominant-baseline="central" font-size="13.2" font-weight="bold" fill="black">0</text>
<text x="125.6" y="375.2" text-anchor="middle" dominant-baseline="central" font-size="7.44" fill="#333">2 Pl.</text>
<circle cx="206" cy="286.4" r="35.2" fill="white" stroke="black" stroke-width="1.5"/>
<circle cx="206" cy="273.2" r="12" fill="#e6194b" stroke="black" stroke-width="1"/>
<circle cx="206" cy="299.6" r="12" fill="#e6194b" stroke="black" stroke-width="1"/>
<circle cx="206" cy="286.4" r="12" fill="white" fill-opacity="0.75"/>
<text x="206" y="286.4" text-anchor="middle" dominant-baseline="central" font-size="13.2" font-weight="bold" fill="black">0</text>
<circle class="person" data-gid="4" data-gruppe="Gruppe 4" data-name="Vorname11 Nachname11" cx="206" cy="273.2" r="12" fill="#e6194b" stroke="black" stroke-width="1"><title>Vorname11 Nachname11 — Gruppe 4</title></circle>
<circle class="person" data-gid="4" data-gruppe="Gruppe 4" data-name="Vorname12 Nachname12" cx="206" cy="299.6" r="12" fill="#e6194b" stroke="black" stroke-width="1"><title>Vorname12 Nachname12 — Gruppe 4</title></circle>
<ellipse cx="206" cy="286.4" rx="12" ry="15.6" fill="white" fill-opacity="0.75"/>
<text x="206" y="281.6" text-anchor="middle" dominant-baseline="central" font-size="13.2" font-weight="bold" fill="black">0</text>
<text x="206" y="294.8" text-anchor="middle" dominant-baseline="central" font-size="7.44" fill="#333">2 Pl.</text>
<circle cx="206" cy="125.6" r="35.2" fill="white" stroke="black" stroke-width="1.5"/>
<circle cx="206" cy="112.4" r="12" fill="#4363d8" stroke="black" stroke-width="1"/>
<circle cx="206" cy="138.8" r="12" fill="#4363d8" stroke="black" stroke-width="1"/>
<circle cx="206" cy="125.6" r="12" fill="white" fill-opacity="0.75"/>
<text x="206" y="125.6" text-anchor="middle" dominant-baseline="central" font-size="13.2" font-weight="bold" fill="black">0</text>
<circle class="person" data-gid="1" data-gruppe="Gruppe 1" data-name="Vorname2 Nachname2" cx="206" cy="112.4" r="12" fill="#4363d8" stroke="black" stroke-width="1"><title>Vorname2 Nachname2 — Gruppe 1</title></circle>
<circle class="person" data-gid="1" data-gruppe="Gruppe 1" data-name="Vorname3 Nachname3" cx="206" cy="138.8" r="12" fill="#4363d8" stroke="black" stroke-width="1"><title>Vorname3 Nachname3 — Gruppe 1</title></circle>
<ellipse cx="206" cy="125.6" rx="12" ry="15.6" fill="white" fill-opacity="0.75"/>
<text x="206" y="120.8" text-anchor="middle" dominant-baseline="central" font-size="13.2" font-weight="bold" fill="black">0</text>
<text x="206" y="134" text-anchor="middle" dominant-baseline="central" font-size="7.44" fill="#333">2 Pl.</text>
<circle cx="125.6" cy="45.2" r="35.2" fill="white" stroke="black" stroke-width="1.5"/>
<circle cx="125.6" cy="32" r="12" fill="#4363d8" stroke="black" stroke-width="1"/>
<circle cx="125.6" cy="58.4" r="12" fill="#f58231" stroke="black" stroke-width="1"/>
<circle cx="125.6" cy="45.2" r="12" fill="white" fill-opacity="0.75"/>
<text x="125.6" y="45.2" text-anchor="middle" dominant-baseline="central" font-size="13.2" font-weight="bold" fill="black">0</text>
<circle class="person" data-gid="1" data-gruppe="Gruppe 1" data-name="Vorname1 Nachname1" cx="125.6" cy="32" r="12" fill="#4363d8" stroke="black" stroke-width="1"><title>Vorname1 Nachname1 — Gruppe 1</title></circle>
<circle class="person" data-gid="2" data-gruppe="Gruppe 2" data-name="Vorname4 Nachname4" cx="125.6" cy="58.4" r="12" fill="#f58231" stroke="black" stroke-width="1"><title>Vorname4 Nachname4 — Gruppe 2</title></circle>
<ellipse cx="125.6" cy="45.2" rx="12" ry="15.6" fill="white" fill-opacity="0.75"/>
<text x="125.6" y="40.4" text-anchor="middle" dominant-baseline="central" font-size="13.2" font-weight="bold" fill="black">0</text>
<text x="125.6" y="53.6" text-anchor="middle" dominant-baseline="central" font-size="7.44" fill="#333">2 Pl.</text>
<circle cx="45.2" cy="125.6" r="35.2" fill="white" stroke="black" stroke-width="1.5"/>
<circle cx="45.2" cy="112.4" r="12" fill="#f58231" stroke="black" stroke-width="1"/>
<circle cx="45.2" cy="138.8" r="12" fill="#f58231" stroke="black" stroke-width="1"/>
<circle cx="45.2" cy="125.6" r="12" fill="white" fill-opacity="0.75"/>
<text x="45.2" y="125.6" text-anchor="middle" dominant-baseline="central" font-size="13.2" font-weight="bold" fill="black">0</text>
<circle class="person" data-gid="2" data-gruppe="Gruppe 2" data-name="Vorname5 Nachname5" cx="45.2" cy="112.4" r="12" fill="#f58231" stroke="black" stroke-width="1"><title>Vorname5 Nachname5 — Gruppe 2</title></circle>
<circle class="person" data-gid="2" data-gruppe="Gruppe 2" data-name="Vorname6 Nachname6" cx="45.2" cy="138.8" r="12" fill="#f58231" stroke="black" stroke-width="1"><title>Vorname6 Nachname6 — Gruppe 2</title></circle>
<ellipse cx="45.2" cy="125.6" rx="12" ry="15.6" fill="white" fill-opacity="0.75"/>
<text x="45.2" y="120.8" text-anchor="middle" dominant-baseline="central" font-size="13.2" font-weight="bold" fill="black">0</text>
<text x="45.2" y="134" text-anchor="middle" dominant-baseline="central" font-size="7.44" fill="#333">2 Pl.</text>
<circle cx="45.2" cy="286.4" r="35.2" fill="white" stroke="black" stroke-width="1.5"/>
<circle cx="45.2" cy="273.2" r="12" fill="#3cb44b" stroke="black" stroke-width="1"/>
<circle cx="45.2" cy="299.6" r="12" fill="#3cb44b" stroke="black" stroke-width="1"/>
<circle cx="45.2" cy="286.4" r="12" fill="white" fill-opacity="0.75"/>
<text x="45.2" y="286.4" text-anchor="middle" dominant-baseline="central" font-size="13.2" font-weight="bold" fill="black">0</text>
<circle class="person" data-gid="3" data-gruppe="Gruppe 3" data-name="Vorname8 Nachname8" cx="45.2" cy="273.2" r="12" fill="#3cb44b" stroke="black" stroke-width="1"><title>Vorname8 Nachname8 — Gruppe 3</title></circle>
<circle class="person" data-gid="3" data-gruppe="Gruppe 3" data-name="Vorname9 Nachname9" cx="45.2" cy="299.6" r="12" fill="#3cb44b" stroke="black" stroke-width="1"><title>Vorname9 Nachname9 — Gruppe 3</title></circle>
<ellipse cx="45.2" cy="286.4" rx="12" ry="15.6" fill="white" fill-opacity="0.75"/>
<text x="45.2" y="281.6" text-anchor="middle" dominant-baseline="central" font-size="13.2" font-weight="bold" fill="black">0</text>
<text x="45.2" y="294.8" text-anchor="middle" dominant-baseline="central" font-size="7.44" fill="#333">2 Pl.</text>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.5 KiB

After

Width:  |  Height:  |  Size: 5.8 KiB

doc/images/vier_tische_linie_viergruppen.svg
+20 -16
View File
@@ -4,23 +4,27 @@
<polyline points="45.2,45.2 125.6,45.2" fill="none" stroke="#e6194b" stroke-width="12" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="0.5"/>
<polyline points="206,45.2 286.4,45.2" fill="none" stroke="#3cb44b" stroke-width="12" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="0.5"/>
<circle cx="45.2" cy="45.2" r="35.2" fill="white" stroke="black" stroke-width="1.5"/>
<circle cx="45.2" cy="32" r="12" fill="#e6194b" stroke="black" stroke-width="1"/>
<circle cx="45.2" cy="58.4" r="12" fill="#e6194b" stroke="black" stroke-width="1"/>
<circle cx="45.2" cy="45.2" r="12" fill="white" fill-opacity="0.75"/>
<text x="45.2" y="45.2" text-anchor="middle" dominant-baseline="central" font-size="13.2" font-weight="bold" fill="black">0</text>
<circle class="person" data-gid="2" data-gruppe="Gruppe 2" data-name="Vorname8 Nachname8" cx="45.2" cy="32" r="12" fill="#e6194b" stroke="black" stroke-width="1"><title>Vorname8 Nachname8 — Gruppe 2</title></circle>
<circle class="person" data-gid="2" data-gruppe="Gruppe 2" data-name="Vorname5 Nachname5" cx="45.2" cy="58.4" r="12" fill="#e6194b" stroke="black" stroke-width="1"><title>Vorname5 Nachname5 — Gruppe 2</title></circle>
<ellipse cx="45.2" cy="45.2" rx="12" ry="15.6" fill="white" fill-opacity="0.75"/>
<text x="45.2" y="40.4" text-anchor="middle" dominant-baseline="central" font-size="13.2" font-weight="bold" fill="black">0</text>
<text x="45.2" y="53.6" text-anchor="middle" dominant-baseline="central" font-size="7.44" fill="#333">2 Pl.</text>
<circle cx="125.6" cy="45.2" r="35.2" fill="white" stroke="black" stroke-width="1.5"/>
<circle cx="125.6" cy="32" r="12" fill="#e6194b" stroke="black" stroke-width="1"/>
<circle cx="125.6" cy="58.4" r="12" fill="#e6194b" stroke="black" stroke-width="1"/>
<circle cx="125.6" cy="45.2" r="12" fill="white" fill-opacity="0.75"/>
<text x="125.6" y="45.2" text-anchor="middle" dominant-baseline="central" font-size="13.2" font-weight="bold" fill="black">0</text>
<circle class="person" data-gid="2" data-gruppe="Gruppe 2" data-name="Vorname6 Nachname6" cx="125.6" cy="32" r="12" fill="#e6194b" stroke="black" stroke-width="1"><title>Vorname6 Nachname6 — Gruppe 2</title></circle>
<circle class="person" data-gid="2" data-gruppe="Gruppe 2" data-name="Vorname7 Nachname7" cx="125.6" cy="58.4" r="12" fill="#e6194b" stroke="black" stroke-width="1"><title>Vorname7 Nachname7 — Gruppe 2</title></circle>
<ellipse cx="125.6" cy="45.2" rx="12" ry="15.6" fill="white" fill-opacity="0.75"/>
<text x="125.6" y="40.4" text-anchor="middle" dominant-baseline="central" font-size="13.2" font-weight="bold" fill="black">0</text>
<text x="125.6" y="53.6" text-anchor="middle" dominant-baseline="central" font-size="7.44" fill="#333">2 Pl.</text>
<circle cx="206" cy="45.2" r="35.2" fill="white" stroke="black" stroke-width="1.5"/>
<circle cx="206" cy="32" r="12" fill="#3cb44b" stroke="black" stroke-width="1"/>
<circle cx="206" cy="58.4" r="12" fill="#3cb44b" stroke="black" stroke-width="1"/>
<circle cx="206" cy="45.2" r="12" fill="white" fill-opacity="0.75"/>
<text x="206" y="45.2" text-anchor="middle" dominant-baseline="central" font-size="13.2" font-weight="bold" fill="black">0</text>
<circle class="person" data-gid="1" data-gruppe="Gruppe 1" data-name="Vorname3 Nachname3" cx="206" cy="32" r="12" fill="#3cb44b" stroke="black" stroke-width="1"><title>Vorname3 Nachname3 — Gruppe 1</title></circle>
<circle class="person" data-gid="1" data-gruppe="Gruppe 1" data-name="Vorname4 Nachname4" cx="206" cy="58.4" r="12" fill="#3cb44b" stroke="black" stroke-width="1"><title>Vorname4 Nachname4 — Gruppe 1</title></circle>
<ellipse cx="206" cy="45.2" rx="12" ry="15.6" fill="white" fill-opacity="0.75"/>
<text x="206" y="40.4" text-anchor="middle" dominant-baseline="central" font-size="13.2" font-weight="bold" fill="black">0</text>
<text x="206" y="53.6" text-anchor="middle" dominant-baseline="central" font-size="7.44" fill="#333">2 Pl.</text>
<circle cx="286.4" cy="45.2" r="35.2" fill="white" stroke="black" stroke-width="1.5"/>
<circle cx="286.4" cy="32" r="12" fill="#3cb44b" stroke="black" stroke-width="1"/>
<circle cx="286.4" cy="58.4" r="12" fill="#3cb44b" stroke="black" stroke-width="1"/>
<circle cx="286.4" cy="45.2" r="12" fill="white" fill-opacity="0.75"/>
<text x="286.4" y="45.2" text-anchor="middle" dominant-baseline="central" font-size="13.2" font-weight="bold" fill="black">0</text>
<circle class="person" data-gid="1" data-gruppe="Gruppe 1" data-name="Vorname1 Nachname1" cx="286.4" cy="32" r="12" fill="#3cb44b" stroke="black" stroke-width="1"><title>Vorname1 Nachname1 — Gruppe 1</title></circle>
<circle class="person" data-gid="1" data-gruppe="Gruppe 1" data-name="Vorname2 Nachname2" cx="286.4" cy="58.4" r="12" fill="#3cb44b" stroke="black" stroke-width="1"><title>Vorname2 Nachname2 — Gruppe 1</title></circle>
<ellipse cx="286.4" cy="45.2" rx="12" ry="15.6" fill="white" fill-opacity="0.75"/>
<text x="286.4" y="40.4" text-anchor="middle" dominant-baseline="central" font-size="13.2" font-weight="bold" fill="black">0</text>
<text x="286.4" y="53.6" text-anchor="middle" dominant-baseline="central" font-size="7.44" fill="#333">2 Pl.</text>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.3 KiB

After

Width:  |  Height:  |  Size: 3.8 KiB