Dessine une courbe de Bézier avec un chemin relatif en SVG

Question

J'ai une question très étrange lorsque je dessine une courbe de Bézier en SVG en utilisant un chemin relatif. Tout d'abord, je l'ai écrit un chemin avec un chemin absolu comme celui-ci:

<?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>

Et je suis une courbe comme ceci: bezier curve

Mais quand je chemin relatif par c, comme ceci:

<?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>

J'ai eu une autre bezier curve

C'était totalement différent. Mais je pense qu'ils sont en fait le même chemin. Qu'est-ce qui ne va pas chez moi?

Answer 1

Vous ne dites pas vraiment, mais je suppose que vous voulez savoir pourquoi les chemins sont différents (?)

La raison est parce que votre hypothèse sur la façon dont le travail relatif coords est erroné. Toutes les coordonnées dans un segment de Bezier relatif sont exprimées par rapport au dernier point du dernier segment (c'est-à-dire 110, 110). Non le dernier point dans le 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>