SVG: Frage zum Wiki-Artikel „Grundformen“

[Yadgar]

Hi(gh)!

Dieses Beispiel:

<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" />

tut nicht das, was es laut Tutorial tun soll - mitnichten füllt das "Gold" die ganze Grafik, sondern man sieht nach wie vor eine korrekt dargestellte deutsche Flagge!

Die Reihenfolge der Rechtecke muss umgekehrt werden:

<rect x="0" y="0" width="5" height="1" fill="black" />
<rect x="0" y="0" width="5" height="2" fill="red" />      
<rect x="0" y="0" width="5" height="3" fill="#fc0" />

dann überdeckt tatsächlich das zuletzt gezeichnete goldene Rechteck die beiden anderen Rechtecke!

Bis bald im Khyberspace!

Yadgar

[Yadgar]

Hi(gh)!

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...

Bis bald im Khyberspace!

Yadgar

[Matthias Scharwies]

Servus!

Der goldene Ton des unteren Balkens nimmt hier den gesamten Hintergrund ein.

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.

Es stand ja schon oben Hintergrund != Grafik

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...

Das ist die Frage. Eigentlich sollte man nichts Falsches zeigen und so etwas ist eben nicht optimal gelöst. Deshalb auch kein Live-Beispiel (mit Klick aus "Ausprobieren" kannst du die Grafiken ja testen, verändern und eben ausprobieren). Da muss man auch nicht weiter ausführen, dass neue SVG-Elemente über die vorher gezeichneten zu liegen kommen. z-index gibt's in SVG (noch) nicht.

Herzliche Grüße

Matthias Scharwies

[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