SVG: Frage zum Wiki-Artikel „Grundformen“

[ThomasM]

Hallo Yadgar,

Sorry, ich habe Bullshit verzapft: ich hätte den Absatz zu Ende lesen sollen, dann wäre mir klar geworden, dass dieses SVG-Skript tatsächlich die deutsche Flagge korrekt darstellen sollte. Trotzdem wäre es um einiges instruktiver, wenn zur Verdeutlichung der Überlagerung von Elementen auch noch die Version mit umgekehrter Reihenfolge der Rechtecke demonstriert würde...

Für solche SVG-Tests magst Du vielleicht mal dieses Tool ausprobieren.

Darin zunächst bei den Snippets "0" wählen (oder den Vorgabecode manuell entfernen).

Dann eingeben:

<g transform="scale(20)">
  <rect x="0" y="0" width="5" height="3" fill="#fc0" />
  <rect x="0" y="0" width="5" height="2" fill="red" />
  <rect x="0" y="0" width="5" height="1" fill="black" />
</g>

scale(), hier zur besseren Veranschaulichung, gehört zu den Transformationstechniken: scale(), skewX(), skewY, rotate(), translate(). das g-Element bildet eine Gruppe für weitere Kindinhalte.

Das Tool und ein 2020 im ersten von bisher drei Onlinesemestern live in einem Kurs enstandenes Video dazu wird freundlicherweise auch im Wiki erwähnt. Danke!

Grüße,
Thomas