Erster SVG-Versuch schlägt fehl

[Matthias Scharwies]

Servus!

Hallo, schon am einfachsten Problem bin ich gescheitert. Ich wollte die franz. Nationalflagge blau-weiß-rot darstellen. Heraus kam alles andere als eine Flagge!

Kein Problem, das sind einige Anfängerfehler, die sich beheben lassen!

Du hast nur das SVG-Element ohne weitere Angaben verwendet. Deshalb hat es die Standardgröße von 300x150px.

Setze Breite, Höhe und eine ViexBox fest:

<svg width="400" height="400" viewbox="0 0 400 400">

Und schon sieht's ganz anders aus - aber nicht wie Frankreich!

<polyline class="blau" points="0,0 400,0 400,100 0,100 0,0"/>
<polyline class="weiss" points="0,100 400,100 400,200 0,200 0,100"/>
<polyline class="rot" points="0,200 400,200 400,300 0,300 0,200"/>

Eine polyline ist nicht unbedingt das beste Element für ein Rechteck. Im schon empfohlenen Einstiegs-Tutorial w wird rect verwendet:

  <rect x="0" y="0" width="1" height="2" fill="#0055A4" />
  <rect x="1" y="0" width="1" height="2" fill="white" />
  <rect x="2" y="0" width="1" height="2" fill="#EF4531" /> 

Wundere dich nicht über die Größenangaben, das wird im Tutorial erklärt, wie man mit der viewbox skaliert.

Viel Spaß mit SVG!

Herzliche Grüße

Matthias Scharwies