Neustart Transform-Tutorial
bearbeitet von Matthias ScharwiesGuten Morgen!
Ich weiß grad nicht weiter: ein Tutorial soll ja …
1. eine Geschichte erzählen
2. vom einfachen zum schwierigeren führen.
3. klare Lernziele haben
[**Transform/SVG-Transformationen**](https://wiki-test.selfhtml.org/wiki/Transform/SVG-Transformationen) (Test-Wiki)
Das war ja ursprünglich (2015) ein Einzel-Tutorial, das das transform-**Atttribut** erklärt hat.
Heute (2022) ist es Unterkapitel im CSS-Tutorial [^1] und das transform-Attribut kann als [Präsentationsattribut](https://wiki.selfhtml.org/wiki/SVG/Attribute/Pr%C3%A4sentationsattribute) auch als CSS-Eigenschaft notiert werden.
[^1]: transform ist nicht mehr in der SVG2-Spec, sondern in einem [CSS Transforms Module Level 2](https://drafts.csswg.org/css-transforms-2/)spezifiziert.
Ich wollte eigentlich das bestehende 1. Kapitel weitgehend so lasssen und erst im 2. Kapitel auf [Unterschiede zwischen SVG und CSS](https://wiki-test.selfhtml.org/wiki/Transform/SVG-Transformationen#CSS_vs._transform-Attribut) eingehen.
Andererseits verwenden [einige Beispiele](https://wiki-test.selfhtml.org/wiki/Transform/SVG-Transformationen#Drehen_mit_rotate) animateTransform (SMIL)[^2], was unser Frickl in Verbindung mit Firefox nicht kann (deshalb die Vorlage:Frickl-vorschau)
[^2]: die Beispiele sind alt - im Produktions-Wiki gibt es neuere, die aber eben oft unübersichtlich sind, da es dort viele transformierte Objekte gibt. Besser ist eine CSS(?)-Animation oder eben nur wenige Objekte, deren Werte man im Frickl / Seiteninspektor ändert.
Fragen:
**1.** [#transform-Attribut](https://wiki-test.selfhtml.org/wiki/Transform/SVG-Transformationen#transform-Attribut): Wie kann man die transform-Funktionen so kennzeichnen, dass sichtbar ist, welche in CSS gehen und welche nur innerhalb des transform-Attributs?
**2.** [#CSS_vs._transform-Attribut](https://wiki-test.selfhtml.org/wiki/Transform/SVG-Transformationen#CSS_vs._transform-Attribut) - Soll man das nach vorne ziehen und die alten Beispiele und Erklärungen entsorgen?
**3.** [#CSS_vs._transform-Attribut](https://wiki-test.selfhtml.org/wiki/Transform/SVG-Transformationen#CSS_vs._transform-Attribut) Wie sollte dieses Unterkapitel heißen?
* CSS_vs._transform-Attribut
* CSS-Eigenschaft_vs._transform-Attribut
* …
**4.** Die oben genannten Abschnitte 1.1-1.4 würde ich durch solche **Vergleiche** ersetzen: [#Verschiebungen](https://wiki-test.selfhtml.org/wiki/Transform/SVG-Transformationen#Verschiebungen) - Habt ihr da Vorschläge, Anregungen, Farbgestaltung, etc ...
* [Ana Tudor geht in ihrem Tutorial](https://css-tricks.com/transforms-on-svg-elements/#aa-translation) auf Unterschiede zw. HTML und CSS ein. Sollte man das hier auch tun?
Herzliche Grüße
Matthias Scharwies
--
Eigentlich hatte ich heute [viel vor](https://wiki.selfhtml.org/wiki/Kategorie:ToDo) - jetzt habe ich morgen viel vor!
Neustart Transform-Tutorial
bearbeitet von Matthias ScharwiesGuten Morgen!
Ich weiß grad nicht weiter: ein Tutorial soll ja …
1. eine Geschichte erzählen
2. vom einfachen zum schwierigeren führen.
3. klare Lernziele haben
[**Transform/SVG-Transformationen**](https://wiki-test.selfhtml.org/wiki/Transform/SVG-Transformationen) (Test-Wiki)
Das war ja ursprünglich (2015) ein Einzel-Tutorial, das das transform-**Atttribut** erklärt hat.
Heute (2022) ist es Unterkapitel im CSS-Tutorial [^1] und das transform-Attribut kann als [Präsentationsattribut](https://wiki.selfhtml.org/wiki/SVG/Attribute/Pr%C3%A4sentationsattribute) auch als CSS-Eigenschaft notiert werden.
[^1]: transform ist nicht mehr in der SVG2-Spec, sondern in einem [CSS Transforms Module Level 2](https://drafts.csswg.org/css-transforms-2/)spezifiziert.
Ich wollte eigentlich das bestehende 1. Kapitel weitgehend so lasssen und erst im 2. Kapitel auf [Unterschiede zwischen SVG und CSS](https://wiki-test.selfhtml.org/wiki/Transform/SVG-Transformationen#CSS_vs._transform-Attribut) eingehen.
Andererseits verwenden [einige Beispiele](https://wiki-test.selfhtml.org/wiki/Transform/SVG-Transformationen#Drehen_mit_rotate) animateTransform (SMIL)[^2], was unser Frickl in Verbindung mit Firefox nicht kann (deshalb die Vorlage:Frickl-vorschau)
[^2]: die Beispiele sind alt - im Produktions-Wiki gibt es neuere, die aber eben oft unübersichtlich sind, da es dort viele transformierte Objekte gibt. Besser ist eine CSS(?)-Animation oder eben nur wenige Objekte, deren Werte man im Frickl / Seiteninspektor ändert.
Fragen:
**1.** [#transform-Attribut](https://wiki-test.selfhtml.org/wiki/Transform/SVG-Transformationen#transform-Attribut): Wie kann man die transform-Funktionen so kennzeichnen, dass sichtbar ist, welche in CSS gehen und welche nur innerhalb des transform-Attributs?
**2.** [#CSS_vs._transform-Attribut](https://wiki-test.selfhtml.org/wiki/Transform/SVG-Transformationen#CSS_vs._transform-Attribut) - Soll man das nach vorne ziehen und die alten Beispiele und Erklärungen entsorgen?
**3.** [#CSS_vs._transform-Attribut](https://wiki-test.selfhtml.org/wiki/Transform/SVG-Transformationen#CSS_vs._transform-Attribut) Wie sollte dieses Unterkapitel heißen?
* CSS_vs._transform-Attribut
* CSS-Eigenschaft_vs._transform-Attribut
* …
**4.** Die oben genannten Abschnitte 1.1-1.4 würde ich durch solche Vergleiche ersetzen: [#Verschiebungen](https://wiki-test.selfhtml.org/wiki/Transform/SVG-Transformationen#Verschiebungen) - Habt ihr da Vorschläge, Anregungen, Farbgestaltung, etc ...
* [Ana Tudor geht in ihrem Tutorial](https://css-tricks.com/transforms-on-svg-elements/#aa-translation) auf Unterschiede zw. HTML und CSS ein. Sollte man das hier auch tun?
Herzliche Grüße
Matthias Scharwies
--
Eigentlich hatte ich heute [viel vor](https://wiki.selfhtml.org/wiki/Kategorie:ToDo) - jetzt habe ich morgen viel vor!
Neustart Transform-Tutorial
bearbeitet von Matthias ScharwiesGuten Morgen!
Ich weiß grad nicht weiter: ein Tutorial soll ja …
1. eine Geschichte erzählen
2. vom einfachen zum schwierigeren führen.
3. klare Lernziele haben
[**Transform/SVG-Transformationen**](https://wiki-test.selfhtml.org/wiki/Transform/SVG-Transformationen) (Test-Wiki)
Das war ja ursprünglich (2015) ein Einzel-Tutorial, das das transform-**Atttribut** erklärt hat.
Heute (2022) ist es Unterkapitel im CSS-Tutorial [^1] und das transform-Attribut kann als [Präsentationsattribut](https://wiki.selfhtml.org/wiki/SVG/Attribute/Pr%C3%A4sentationsattribute) auch als CSS-Eigenschaft notiert werden.
[^1]: transform ist nicht mehr in der SVG2-Spec, sondern in einem [CSS Transforms Module Level 2](https://drafts.csswg.org/css-transforms-2/)spezifiziert.
Ich wollte eigentlich das bestehende 1. Kapitel weitgehend so lasssen und erst im 2. Kapitel auf [Unterschiede zwischen SVG und CSS](https://wiki-test.selfhtml.org/wiki/Transform/SVG-Transformationen#CSS_vs._transform-Attribut) eingehen.
Andererseits verwenden [einige Beispiele](https://wiki-test.selfhtml.org/wiki/Transform/SVG-Transformationen#Drehen_mit_rotate) animateTransform (SMIL)[^2], was unser Frickl in Verbindung mit Firefox nicht kann (deshalb die Vorlage:Frickl-vorschau)
[^2]: die Beispiele sind alt - im Produktions-Wiki gibt es neuere, die aber eben oft unübersichtlich sind, da es dort viele transformierte Objekte gibt. Besser ist eine CSS(?)-Animation oder eben nur wenige Objekte, deren Werte man im Frickl / Seiteninspektor ändert.
Fragen:
**1.** [#transform-Attribut](https://wiki-test.selfhtml.org/wiki/Transform/SVG-Transformationen#transform-Attribut): Wie kann man die transform-Funktionen so kennzeichnen, dass sichtbar ist, welche in CSS gehen und welche nur innerhalb des transform-Attributs?
**2.** [#CSS_vs._transform-Attribut](https://wiki-test.selfhtml.org/wiki/Transform/SVG-Transformationen#CSS_vs._transform-Attribut) - Soll man das nach vorne ziehen und die alten Beispiele und Erklärungen entsorgen?
**3.** [#CSS_vs._transform-Attribut](https://wiki-test.selfhtml.org/wiki/Transform/SVG-Transformationen#CSS_vs._transform-Attribut) Wie sollte dieses Unterkapitel heißen?
* CSS_vs._transform-Attribut
* CSS-Eigenschaft_vs._transform-Attribut
* …
**4.** Die oben genannten Abschnitte 1.1-1.4 würde ich durch solche Vergleiche ersetzen: [#Verschiebungen](https://wiki-test.selfhtml.org/wiki/Transform/SVG-Transformationen#Verschiebungen) - Habt ihr da Vorschläge, Anregungen, Farbgestaltung, etc ...
Herzliche Grüße
Matthias Scharwies
--
Eigentlich hatte ich heute [viel vor](https://wiki.selfhtml.org/wiki/Kategorie:ToDo) - jetzt habe ich morgen viel vor!