SVG-Elemente & Attribute
Der myGEKKO-Renderer setzt eine eigene, bewusst kleine SVG-Untermenge um. Alles, was hier nicht aufgeführt ist, wird ignoriert.
Vorlagen im Feld SVG
Das Feld SVG eines Objekts kann mehrere <svg>…</svg>-Blöcke enthalten. Jeder Block wird einzeln geparst und unter seinem alias abgelegt:
<svg alias='Qual' viewBox='0 0 200 100' width='200' height='100'> … </svg>
<svg alias='UV' viewBox='0 0 200 100' width='200' height='100'> … </svg>
aliasmuss im öffnenden<svg>-Tag stehen. Fehlt er, wird der Block unter seiner laufenden Nummer (0,1, …) abgelegt.- Aufruf aus der Formel:
GUI.paintSVG('Qual', x, y, w, h, winkel, 'KEY', wert, …);. - In CSV-Feldern verwenden Sie in SVG einfache Hochkommas (
'). Ein doppeltes Anführungszeichen beendet das Feld.""wird ohnehin zu'.
<svg>-Wurzel
| Attribut | Wirkung |
|---|---|
width, height |
Größe (Default 200 × 200) |
viewBox |
x y w h, überschreibt width/height für die Skalierung |
background |
Hintergrundfarbe (mit $(KEY)) |
alias |
Name der Vorlage |
xmlns, font-family |
werden toleriert, aber ignoriert |
Beim Zeichnen über GUI.paintSVG wird die Vorlage verzerrungsfrei in das Zielrechteck w × h eingepasst und zentriert.
Unterstützte Elemente
| Element | Attribute |
|---|---|
rect |
x, y, width, height, rx, ry |
circle |
cx, cy, r |
ellipse |
cx, cy, rx, ry |
line |
x1, y1, x2, y2 |
polyline |
points |
polygon |
points (wird geschlossen) |
path |
d mit den Kommandos M L H V C S Q T A Z (groß = absolut, klein = relativ) |
text |
x, y, text-anchor (start/middle/end), font-size, font-weight. Inhalt max. 255 Zeichen. |
style |
CSS-Klassenregeln (siehe unten) |
linearGradient, radialGradient, stop |
Verläufe (siehe unten) |
<g> und <defs> kommen in den Bibliotheken als Container vor. Ihre eigenen Attribute (z. B. transform am <g>) werden nicht ausgewertet (zu klären). Kommentare <!-- … --> sind erlaubt.
Gemeinsame Attribute
| Attribut | Wirkung |
|---|---|
fill |
Füllfarbe oder url(#id) für einen Verlauf, none = keine Füllung |
fill-opacity |
0…1 |
stroke |
Linienfarbe |
stroke-opacity |
0…1 |
stroke-width |
Linienstärke. Werte zwischen 0 und 1 werden auf 1 angehoben. |
visibility |
Ausdruck. Ergebnis 0 blendet das Element aus, Default 1. Beispiel: visibility='$(STATE)>0'. |
transform |
nur rotate(winkel cx cy) mit genau drei Werten, z. B. rotate($(DIR) 34 57) |
class |
CSS-Klasse aus <style> |
font-size |
Schriftgröße (Default 16, skaliert) |
font-weight |
bold oder ≥ 600 → fett |
Nicht ausgewertet werden u. a. stroke-linecap, stroke-linejoin, font-family, opacity, translate/scale/matrix und <tspan>.
Platzhalter und Ausdrücke
$(KEY)wird durch den Wert ersetzt, der inGUI.paintSVG(…,'KEY',wert,…);übergeben wurde. Das gilt in Text-Inhalten und in den Attributenfill,stroke,transform,visibility,background, in Koordinaten und in CSS-Werten.- Koordinaten und Maße (
x,y,width,height,rx,ry,r,cx,cy,x1…y2) werden nach der Ersetzung als arithmetischer Ausdruck berechnet:
<rect x='8+($(AQIPOS)/30*184)' y='38' width='4' height='11' fill='#ffffff'/>
pointsunddwerden nicht ersetzt. Pfade sind also statisch. Bewegung erreichen Sie übertransform='rotate(…)'oder über die GUI-API.
Farben
| Notation | Beispiel |
|---|---|
| Hex | #0c1a32, #fff |
rgb(r,g,b) |
rgb(255,0,0) |
| Namen | black, white, red, green, blue, none |
Fehlt die Farbe, gelten diese Regeln: Text ohne fill wird schwarz, line, path und polygon ohne stroke erhalten die Schriftfarbe des Themes. Ein Pfad ohne Füllung und ohne Linienstärke wird mit Stärke 1 gezeichnet.
CSS (<style>)
<style>
.tile { fill: #0c1a32; stroke: #1c2f4e; stroke-width: 0.5; }
.text-primary { fill: #ffffff; font-weight: 600; }
</style>
- Nur Klassenselektoren (
.name). - Ausgewertete Eigenschaften:
fill,fill-opacity,stroke,stroke-opacity,stroke-width,visibility,font-weight,font-size. - Die Klassenwerte überschreiben gleichnamige Attribute des Elements.
font-sizeaus einer Klasse wird intern durch 1,4 geteilt,font-sizeals Attribut nicht. Das ist ein Unterschied, der bei der Größenwahl zu beachten ist.- Das
;am Ende einer CSS-Zeile ist optional. Im DEMO_DDF fehlt es, weil;im CSV-Kontext heikel ist. Innerhalb von"…"ist es aber erlaubt (sieheGeneralMini). - Klassenwerte sind zur Laufzeit über
$.STYLE.<klasse>.<eigenschaft>les- und schreibbar (siehe GUI-Variablen).
Verläufe
<defs>
<linearGradient id='genSky' x1='0' y1='0' x2='0' y2='1'>
<stop offset='0' stop-color='#1f4f9a'/>
<stop offset='1' stop-color='#6f9fd6'/>
</linearGradient>
<radialGradient id='genGlow' cx='0.5' cy='0.5' r='0.5'> … </radialGradient>
</defs>
<path d='…' fill='url(#genSky)'/>
- Linear:
x1 y1 x2 y2. Radial:cx cy r fx fy.gradientUnits='userSpaceOnUse'wird unterstützt, sonst gilt objectBoundingBox. stop:offset,stop-color,stop-opacity.
Neu (04.11.2026)
Mehrstufige Verläufe (Quelle: guiSVG.cpp, Stand 04.11.2026).
- Bis zu 16 Stopps werden verwendet und nach
offsetsortiert. Zwischenstopps werden jetzt dargestellt. - Beginnt der erste Stopp nach 0 oder endet der letzte vor 1, wird seine Farbe bis 0 bzw. 1 verlängert.
stop-opacitywird mit der Deckkraft des Elements multipliziert.- Ohne Stopps wird keine Verlaufsfarbe gesetzt.
Bibliotheks-Platzhalter state / $COLOR
In der Systembibliothek stehen Klassen wie .status { fill: state } bzw. $COLOR1, state2. Dahinter steht ein Mechanismus für Zustandsfarben. Im Zeichenpfad von GUI.paintSVG/paintSvgLib ist er aktuell nicht verdrahtet (die Zustandsliste bleibt leer). Verwenden Sie stattdessen $(COLOR)/$(STATE) wie im Symbol DOOR. Wie die state-Notation ausgewertet wird, ist zu klären.