Zeichnen Bezier-Kurve mit relativen Pfad in SVG

Question

Ich habe eine sehr seltsame Frage beim Zeichnen von Bezier-Kurve in SVG mit relativen Pfad. Zuerst schrieb ich einen Pfad mit absoluten Pfad wie folgt aus:

<?xml version="1.0" standalone="no"?> <svg width="190px" height="160px" version="1.1" xmlns="http://www.w3.org/2000/svg"> <path d="M110 110 C 120 120, 140 120, 150 110" stroke="black" fill="transparent"/> </svg>

Und ich habe eine Kurve wie folgt aus: bezier curve

Aber wenn ich verwendet relativen Pfad von c, wie folgt aus:

<?xml version="1.0" standalone="no"?> <svg width="190px" height="160px" version="1.1" xmlns="http://www.w3.org/2000/svg"> <path d="M110 110 c 10 10, 20 0, 10 -10" stroke="black" fill="transparent"/> </svg>

ich habe eine andere bezier curve

Es war total anders. Aber ich denke, sie sind eigentlich derselbe Weg. Was ist falsch mit mir?

Answer 1

Sie sagen nicht wirklich, aber ich nehme an, Sie wissen wollen, warum die Pfade unterschiedlich sind (?)

Der Grund, weil Ihre Annahme ist, wie relativ coords Arbeit falsch ist. Alle Koordinaten in einem relativen Bezier-Segment werden relativ zum letzten Punkt im letzten Segment ausgedrückt (dh 110, 110). Nicht der letzte Punkt in der Bezier.

<svg width="190px" height="160px"> 
 

 
    <path d="M110 110 C 120 120, 140 120, 150 110" stroke="black" fill="transparent" stroke-width="10"/> 
 

 
    <path d="M110 110 c 10 10, 30 10, 40 0" stroke="green" fill="transparent" stroke-width="5"/> 
 

 
</svg>