Rolf B: durch Try & Error zum Erfolg

Beitrag lesen

SELF-Forum

durch Try & Error zum Erfolg

Rolf B
– Informationen zu den Bewertungsregeln

Hallo Linuchs,

nein, das sind SVG-Einheiten. Wie groß eine SVG Einheit ist, wird durch die Viewbox festgelegt. Die Werte bei SVG-Einheiten sind floats.

<svg viewbox="0 0 500 500">
   <line x1="50" y1="50"  x1="450" y1="450"></line>
</svg>

zeichnet eine Diagonale von Punkt (50,50) nach (450,450) im Koordinatensystem des SVG-Elements. Wie groß das auf dem Bildschirm ist, hängt davon ab, welche width und height Du dem SVG-Element gibst. Wenn Du width und height Attribute des SVG-Elements nimmst, sind das Pixel. Wenn Du es mit CSS machst, kannst Du beliebige CSS Längeneinheiten verwenden.

Falls das Seitenverhältnis der Größen von Viewbox und SVG-Element nicht übereinstimmt, hast Du noch das preserveAspectRatio Attribut, um festzulegen, wie sich die Viewbox in die Elementbox einpassen soll.

Der Marker hat eine eigene Viewbox, in deinem Fall war das "0 0 10 10", und ich hatte das auf "0 0 2 2" herunterskaliert. Dann sieht das so aus:

SVG Dreieck

Im Path-Befehl heißt ein Großbuchstabe "absolute Koordinaten" und ein Kleinbuchstabe "relative Koordinaten". Die Koordinatenwerte bewegen sich jetzt in der Viewbox des Markers. M0,0 bedeutet also: Geh nach (0,0), ohne zu zeichnen. l2,1 zeichnet eine Linie zu dem Punkt, der 2 rechts und 1 tiefer liegt, also (2,1). Dann kommt l-2,1, das geht zu dem Punkt, der 2 links und 1 tiefer liegt, also (0,2). Und zum Schluss z um den Pfad zu schließen, das geht demnach nach (0,0) zurück. Statt mit relativen Koordinaten hätte man auch mit absoluten Werten zeichnen können: "M0,0 L2,1 L0,2 Z". Die Attribute refX und refY bezeichnen den Punkt im Bild, der mit dem Endpunkt der Linie zusammenfallen soll, an die der Marker gehängt wird. Deswegen refX="2" und refY="1", weil da die Pfeilspitze ist.

Wie groß die Viewbox des Markers nun tatsächlich im SVG ist, hängt an den marker...-Attributen des marker-Elements. Mit markerUnits="userSpaceOnUse" legst Du fest, dass der Marker die angegebene Breite und Höhe in Viewbox-Einheiten des SVG-Elements hat[1]. Die Alternative ist "strokeWidth". Bei einer stroke-width von 1 ist das Ergebnis unverändert, aber wenn du die stroke-width der Linie auf 2 erhöhst, führt markerUnits="strokeWidth" dazu, dass sich die Pfeilspitze proportional vergrößert, also 30x30 groß ist.

Alle Klarheiten beseitigt?

Rolf

--
sumpsi - posui - obstruxi

  1. Es mag noch weitere Schachtelungen von Viewboxen geben, die das verkomplizieren, das schau ich jetzt nicht nach ↩︎

Beitrag melden
–
Informationen zu den Bewertungsregeln