nicht angemeldet
Erster SVG-Versuch schlägt fehl
Matthias Apsel
Matthias Scharwies
Der MartinHallo, schon am einfachsten Problem bin ich gescheitert. Ich wollte die franz. Nationalflagge blau-weiß-rot darstellen mit:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test-SVG</title>
</head>
<body>
<h1>Test-SVG</h1>
<svg>
<style>
.blau{
fill: blue;
stroke: black;
stroke-width: 3px;
}
.weiss{
fill: white;
stroke: black;
stroke-width: 3px;
}
.rot{
fill: red;
stroke: black;
stroke-width: 3px;
}
</style>
<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"/>
</svg>
</body>
</html>
Heraus kam alles andere als eine Flagge!
-
Hallo Jochen,
schon am einfachsten Problem bin ich gescheitert.
Hast du mit unserem SVG-Einstieg gearbeitet?
Bis demnächst
Matthias-
Hallo Matthias, danke für den Tipp!
-
-
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
--
Es gibt viel zu tun: ToDo-Liste-
Hallo,
Eine polyline ist nicht unbedingt das beste Element für ein Rechteck. Im schon empfohlenen Einstiegs-Tutorial w wird rect verwendet:
und ergänzend dazu: Bei Flaggen ist es auch nicht üblich, dass die farbigen Felder schwarz umrandet sind. In der style-Definition sollte stroke daher identisch mit fill gesetzt werden.
Ciao,
Martin--
Es gibt eine Theorie, die besagt, dass das Universum augenblicklich durch etwas noch Komplizierteres und Verrücktes ersetzt wird, sobald jemand herausfindet, wie es wirklich funktioniert. Es gibt eine weitere Theorie, derzufolge das bereits geschehen ist.
- (frei übersetzt nach Douglas Adams)-
Servus!
und ergänzend dazu: Bei Flaggen ist es auch nicht üblich, dass die farbigen Felder schwarz umrandet sind. In der style-Definition sollte stroke daher identisch mit fill gesetzt werden.
Oder stroke einfach weglassen, Standardwert ist none, also ohne Linie.
Herzliche Grüße
Matthias Scharwies
--
Es gibt viel zu tun: ToDo-Liste
-
-