SVG Übung 6 (Übung 13)

Die zweite Kurve soll am Endpunkt der ersten anlegen. Damit dies der Fall ist muss, wird für die Koordinate des M Befehls das gleiche eingesetzt, wie die letzte Koordinate der ersten Kurve (90|200). Damit die Kurven nun Glatt ineinander übergehen, muss die Steigung der beiden Kurve an diesem Punkt gleich sein. Um das sicherzustellen, muss der erste Kontrollpunkt der zweiten Kurve ein "Spiegelbild" des Zweitenn Kontrollpunkts der ersten Kurve sein. Um diesen Punkt zu berechnen kann der Vektor zwischen dem Endpunkt und dem zweiten Kontrollpunkt der ersten Kurve genutzt werden. Für diesen Folgt:

Endpunkt - Kontrollpunkt = Vektor => (90|200) - (130|100) = (-40|100)

Wenn wir diesen Vektor nun auf unseren Startpunkt addieren erhalten wir:
(90|200) + (-40|100) = (50|300)
50,300 ist also der zweite gesuchte Punkt.

Der Pfad der zweiten Kurve lautet also:

<path d="M90,200 C50,300 350,400, 360,130" fill="none" stroke="black">