SVG und custom properties

[Matthias Scharwies]

Servus!

Ich versuche ein SVG-Diagramm von den vielen XML-Attributen „zu befreien“.

Beispiel:SVG-data-2.html#view_result

• bei height und y ist mir dies schon gelungen, sie werden aus --valueheraus berechnet.

Hat jemand eine Idee, wie man evtl. mit counter oder nth-of-type einen Wert n ermitteln kann, um den x-Wert für das use-Element, aber auch für text automagisch setzen zu können?

Sonst müsste man eben neben den --value einen --n-Wert setzen, was nicht so schön wäre.

[EDIT] Grad gemerkt, das geht nur im Firefox, nicht im Chrome 😟

Wenn ich die custom properties ins CSS und nicht als Wert für ein XML-Attribut packe, geht's auch dort! 😀

[/EDIT]

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias,

mit counter geht es nicht, daran bin ich in meinem 51 auch gescheitert. Einen Counter kann man nur in contents verwenden, vermutlich, weil andernfalls die CSS Berechnungen zu inperformant werden.

Man kann leider auch nicht einen custom-property Wert aus dem Wert eines Nachbarn berechnen, nur aus dem Elternwert.

Der Versuch, einen Counter --n zu nennen, funktioniert zwar insoweit, als dass der Counter als solcher funktioniert, aber var(--n) ist trotzdem leer.

Der Schmerz ist durchaus verbreitet, hier ist ein Issue und hier ein Alternativvorschlag. Aber das reift noch.

Ich hab's deshalb so umgesetzt:

.hand .card:nth-of-type(1) { --n: 1; }
.hand .card:nth-of-type(2) { --n: 2; }
.hand .card:nth-of-type(3) { --n: 3; }
.hand .card:nth-of-type(4) { --n: 4; }
.hand .card:nth-of-type(5) { --n: 5; }

In der Hand geht's noch, die hat nicht mehr als 5 Karten. Aber im Nachziehstapel - uiuiui, da sind es 32.

Hier bieten sich Tools wie Less, Sass oder Stylus an, die CSS in der Developer-Toolchain generieren.

Rolf

[Matthias Scharwies]

Hallo Rolf!

Danke, hatte auch ein bisschen recherchiert und bin dann aber raus in den Wald gegangen.

• SVG/Tutorials/Datenvisualisierung/Balken-_und_Kreisdiagramme#Säulendiagramm

Das soll ja nur zeigen, wie weit man mit Präsentationsattributen und custom properties kommt, und was dann doch (noch) nicht geht.

Hier bieten sich Tools wie Less, Sass oder Stylus an, die CSS in der Developer-Toolchain generieren.

Ja, aber die x-Koordinaten für die Text-Legenden kommen so auch nicht her - da mach ich (mal) was mit JavaScript!

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias Scharwies,

bin dann aber raus in den Wald gegangen.

Dafür bräuchte ich hier einen Neopren-Anzug 🌧️🌊.

Ich probier's jetzt mal mit der Passionsandacht, da ist wenigstens ein Dach drüber.

Rolf