SVG ist besser als Canvas
bearbeitet von
Servus!
So, kleiner *ich-fall-vom-hocker*-Moment. Bin gerade nachhause gekommen und hab den Rechner gewechselt, Somit eine Neue Auflösung. Folgendes Beispiel:
~~~html
<svg id="style_top" role="none presentation" viewBox="0 0 1218 77" preserveAspectRatio="xMinYMin">
<polyline points="250,0 250,15 265,30 459,30 484,55 559,55 574,70 644,70 659,55 734,55 759,30 953,30 968,15 968,0 734,0 704,30 514,30 484,0 250,0" stroke-width="1" stroke-linecap="round" stroke="rgba(250,180,0,0.75)" fill="rgba(250,180,0,0.45)" />
<polyline points="489,60 554,60 569,75 489,60" stroke-width="1" stroke-linecap="round" stroke="rgba(250,180,0,0.75)" fill="rgba(250,180,0,0.45)" />
<polyline points="649,75 664,60 729,60 649,75" stroke-width="1" stroke-linecap="round" stroke="rgba(250,180,0,0.75)" fill="rgba(250,180,0,0.45)" />
</svg>
~~~
Nun dachte ich, dass durch die Angegebene `viewBox` also dem Koordinatensystem für die Grafik, sich die Grafik automatisch einer sich ändernden Größe des `<svg>` anpasst. So sollte es doch sein?
Nun bei mir ist nichts mehr da wo es geplant ist, alles kleiner, nicht mehr mittig, nichtmal das die Grafik und damit anscheinend auch das Koordinatensystem über die gesamte breite von `width: 100%;` geht. Irgendwie sehe ich gerade nicht was ich Falsch gemacht bzw verstanden hab.
Gruß
Jo