Neustart Transform-Tutorial

[Matthias Scharwies]

Servus!

Hallo Matthias,

ich lass Dich nicht gerne hängen, aber ist in dem Thema außer Dir irgendwer sattelfest?

Ich ja auch nicht!

Gerade bei SMIL kann ich gar nicht mitreden.

Das war 2001 wohl geil; lief aber nicht im IE. Mittlerweile ist es aufgrund der guten Unterstützung von CSS-Animations wohl echt obsolet,

Aber beim transform-Attribut dachte ich bisher, dass die CSS Eigenschaft transform für SVG Elemente die gleichen Funktionen unterstützt wie das Attribut (bis auf das Thema Einheiten und Prozente), und dass alle SVG Transformfunktionen auch im CSS für HTML funktionieren würden - sprich: transform für SVG ist eine Teilmenge von transform für HTML. Oder?

Ja, stimmt! alle transform-Funktionen laufen in der transform-Eigenschaft, selbst ...3d()und im Attribut eben nur die „normalen“.

Demnach müsste man doch bei den Funktionen nur markieren, welche auch in SVG erlaubt sind.

Ja, so hab's ich ja gemacht: #transform-Attribut

Nur am Text müsste man noch feilen. Evtl ein * und unten „* Diese Funktionen sind im Transform-Attribut erlaubt.“

Das Thema attribut vs CSS Eigenschaft würde ich vorne erledigen, mit ein paar Worten hinter "Seit SVG2 ist es ein Präsentationsattribut, das nun auch in CSS festgelegt werden kann." Das ist kein Tutorial-Artikel (steht zumindest nicht im Namen), da kann man sowas machen.

Ana Tudor geht in ihrem Tutorial auf Unterschiede zw. HTML und CSS ein.

Tut sie nicht, sie behandelt Unterschiede zw. HTML und SVG.

Oh Gott - hab ich das geschrieben?

Ich suche seit drei Tagen ein Adjektiv, das beschreibt, wie die 2015er Version des Tutorials die Verwendung des transform-Attributs erklärt und jetzt 2022, ausgehend von der „bereits bekannten“ transform-Eigenschaft in CSS und den CSS-Verhaltensweisen plötzlich nicht transform, sondern die Besonderheiten von SVG erklärt werden.

bizarr ist es nicht und auch nicht kurios, schräg, komisch ...

Die sind real und können Dir durchaus ein Bein stellen, sobald der transform-origin für eine Transformfunktion relevant wird. Aber wie das genau stattfindet, müsste ich mir auch selbst erst nochmal anschauen. Ich denke, bei SVG ist die Angabe des transform-origin viel wichtiger als in HTML, weil HTML den Mittelpunkt des Elements per Default verwendet und das oft eine gute Ausgangsbasis ist.

Ja, da werd' ich die Infografik zu Rotationen in CSS und SVG nachzeichnen. In SVG muss man da das Element um den Ursprung zeichnen und dann nach der Drehung verschieben. →

• SVG/Tutorials/Einstieg/SVG_mit_CSS_animieren#Transformationen
  • Bsp

Bei SVG ist das komplizierter, weil auch transform-origin nicht relativ zum Grafikelement angegeben wird, sondern relativ zum Koordinatenursprung. Meine ich...

Laut Spec müsste auch transform-origin gehen. Muss ich testen.

Danke für deine Antwort

Herzliche Grüße

Matthias Scharwies

Ich mach da die Tage weiter. Haben problematische WhatsApp-Chats in der 5. und jede Menge Gespräche zur Zeit. 😟