viewBox
Die viewBox als Attribut des svg-Elementes stellt ein Verhältnis zu den Eigenschaft von width und height im svg-Elementes her. Anhand des Schiebereglers wird verdeutlicht, wie die Änderung sich auf den Inhalt von svg auswirkt. SVG (Scalable Vector Graphics) ist als Zeichenfläche/viewBox zu verstehen.
Anmerkung: MSIE verhält sich mal wieder etwas anders. Er stellt die die Kreise, wie übrigens auch alle anderen Elemente, auch außerhalb der viewBox dar. Alternativ müsste mit dem Anzeigenbegrenzer clip nachgeholfen werden. Ist hier nicht die Aufgabe. Die Angabe im output bleibt unverändert 200/200!
Die Anregung entnahm ich von Dr.Web, von deren Ausführung weitere Beispiele erläutert werden. Es geht also um ein Koordinatensystem, das auf die SVG-Zeichenfläche bezogen skalierbare Größenänderungen vornimmt.
Ausgang ist eine Zeichenfläche von 200*200px. Mit dem Schieberegler wird in Stufen von 50px die Relation von viewBox zur Zeichenfläche geändert.
Man merke: Erhält viewBox geringe Werte, wird der Inhalt vergrößert, folglich umgekehrt verkleinert sich der Inhalt in der Zeichenfläche.
Blaumarkiert ist die gewählte Größenangabe für die viewBox.
Kreis hat aktuell den Durchmesser von px.
Hier nehme ich nochmals das text-Element auf.
Dies ist ein Dreizeiler, der davon beeinflusst wird, ob und welche x-/y-Startpunkte gesetzt werden. Dies wird wiederum bei Verwendung der viewBox (selbständiges Thema) zu weiterem Verhalten innerhalb der svg-Zeichenfläche führen. Eigentlich sollte man von zuhause aus ein Frickeltyp sein, um es hiermit aufzunehmen. Da ich mich nicht alleine wähne, mach ich weiter. Damit nicht genug, bilde ich erst einmal den Quellcode ab.
| 88 89 90 91 92 93 94 95 96 |
<svg class="svg" width="400" height="70" viewBox="0 0 400 60" >
|
Allein die geringfügige Änderung von height="70" und der Angabe in der viewBox viewBox="0 0 400 60" in 40: führt dazu, dass sich der Abstand vertical verändert.
Das Beispiel nebenstehend nochmal mit height="70" und viewBox="0 0 400 70". Das Attribut viewBox ist in diesem Fall zwar nicht notwendig, weil keine abweichenden Eigenschaften übergeben werden. Damit wird aber der Einfluss der viewBox deutlich.
Nun noch eine Änderung auf Breite und Höhe bezogen.
Die viewBox="0 0 330 50" wirkt sich nun auf das Koordinatensytem der Zeichenfläche svg width="400" height="70" entsprechend vergrößernd aus. Eine Angabe, die nur auf Breitenänderung basiert, wirkt sich allein auf eine horizontale Verschiebung aus. Um das zu verinnerlichen, steht der Text im SVG-Element.