path in SVG + Shape-Morphing

[Matthias Scharwies]

Guten Morgen,

Ich habe mal alles, was an Referenz erinnert, in diese Referenz-Artikel kopiert:

• SVG/Element/path
• SVG/Attribut/d

Das Tutorial

• SVG/Tutorials/Pfade

sollte gute Beispiele zeigen und von einfachen Linien aus bis hin zu komplexen Formen gehen.

Dabei sollte ein Tutorial mit Beispielen arbeiten und alles wichtige erklären, bzw. klar kennzeichnen, was benötigtes Vorwissen ist und dann darauf verlinken - ohne es immer wieder zu erklären.

1. den Unterschied von absoluten und relativen Werten zeigen. ✔

→ LineTo-Beispiel

Könntet ihr euch das mal durchlesen?

Die Kontrolllinien und -punkte sind - anders als in der Spec - als Markierungen angelegt und nicht erklärt, aber verlinkt.

Anstelle der SELF-Farben im CSS, was einen Denkschritt von der id zur Farbe erforderte, habe ich jetzt stroke als XML-Attribut mit den Farbnamen blue, gold, red verwendet.

#eins {
  stroke: #dfac20;
}

Die Spec verwendet bei relativen Kommandos die Variable dx, um die Verschiebung zu betonen. Sollen wir das auch machen?

M x,y

m dx,dy

2. die Wirkung von Z bei Füllungen und Randlinien zeigen ✔

{{LiveBeispiel}} sieht geil aus, finde ich!

Ist das gold da zu grell?

Soll ich in der Mitte des 4 Einheiten breiten strokes weiß gestrichelte Hilfslinien einzeichnen? Das würde die Zahle der SVG-Elemente verdoppeln, bei einer (im Tut. vorgeschlagenen) Änderung aber visualisieren, wo der stroke liegt. 😉

3. Bei Bögen und Kurven zeigen, was ohne fill: none; passiert.

Ich bin bis zu den Bézier-Kurven gekommen.

Hier zeigt sich ein weiterer Mangel unserer statischen Live-Beispiele: wenn man eine Bézier-Kurve im Frickl ändert, bleiben die Kontrolllinien auf der ursprünglichen Position. Da hilft nur ein …

5. bei Bögen und Kurven mehr mit Generatoren arbeiten, anstatt viele Minimalbeispiele zu zeigen

Den mach ich irgendwann …

4. CSS-Animationen, bzw. Pfad-Animationen mit SMIL und d:path( ) zeigen und die Browserunterstützung thematisieren.

Ich bin mir nicht sicher, welche Anwendungsbeispiele man in diesem Tutorial zeigen sollte, oder ob man dort nicht mit mehreren Cards unter "Siehe auch" auf andere Tutorials verweist.

SVG/Tutorials/Shape-Morphing

Ursprünglich aus 2015 - vor 3 Jahren ergänzt, heute mit 99% Unterstützung von clip-path und prefers-reduced-motion wieder renovierungsbedürftig gewesen.

{{LiveBeispiel}} - habe ich schon mal gesagt, dass das geil ist? Danke @Rolf B

Damit ist das Problem der mangelnden SMIL-Unterstützung des Frickl umgangen.

Beispiele, die ich so eingebunden habe, benötigen keine h1 mehr. ~Evtl. sollte man sich auch mal das Grundlayout erneut anschauen. Bei Mimimalbeispielen benötigt man imho kein border für svg.~ Das ist in der Beispiel -Vorlage drin:

.tabbed .live-view {border: 1px solid #ddd;}

Ich frage euch das alles am 06.03 am Stammtisch!

Herzliche Grüße

Matthias Scharwies