0

I tried to get the same result converting absolute C commands to relative c coordinates for cubic Bézier curves in a SVG-path d attribute string.

In this test, both results should look the same. They are not. There must be something I don't understand.

Somebody can explain what I am missing?

I know the theory and the difference between both C and c.

In my eyes the numbers are okay. The result isn't.

<svg width="200" height="200" viewBox="50 100 200 200" xmlns="http://www.w3.org/2000/svg">

<g id="boom" stroke="green" stroke-width="0.75" fill="lightblue"> 
   <path d="M 100,200 C 105,190 95,170 100,160 "/>
   <path d="M 150,200 c 5,-10 -10,-20 5,-10 "/>
</g>
<g id="circles" stroke="none" fill="red"> 
   <circle cx="105" cy="190" r="1"/>
   <circle cx= "95" cy="170" r="1"/>
   <circle cx="100" cy="160" r="1"/>
   <circle cx="155" cy="190" r="1"/>
   <circle cx="145" cy="170" r="1"/>
   <circle cx="150" cy="160" r="1"/>
</g>
</svg>
herrstrietzel
  • 11,541
  • 2
  • 12
  • 34
stefcas
  • 19
  • 3
  • 1
    [Commands are case-sensitive. An upper-case command specifies absolute coordinates, while a lower-case command specifies coordinates relative to the current position.](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d) – enxaneta Feb 26 '23 at 16:39
  • Don't include screenshots of code. Please add an [Minimal minimal-reproducible-example StackOverflow Snippet](https://stackoverflow.com/help/minimal-reproducible-example) to your post. It will help readers execute your code with one click. And help create answers with one click. See [How to add a StackOverflow snippet](https://meta.stackoverflow.com/questions/269753/feedback-requested-runnable-code-snippets-in-questions-and-answers) – Danny '365CSI' Engelman Feb 26 '23 at 17:03
  • 1
    Please [edit] your post so that it actually has a question in it. It does not go in your title, it goes in your post. The title is only to one-line summarize the problem for listing purposes. Also, [do not post pictures of test](/help/how-to-ask), just put that text directly into your post. And if it's SVG, you can even just put it in a runnable snippet. – Mike 'Pomax' Kamermans Feb 26 '23 at 18:26

1 Answers1

2

Your x/y calculation has an error:

The offsets to subtract from absolute values are relative to the last on-path position/point, so both control points and the final point are all relative to the same last known path point:

M 100 200 
C 105 190  95 170  100 160  // (M: x:-100, y:-200) 
C 105 140  95 130  100 110  // (preceding C: x:-100, y:-160)

becomes:

M 100 200 
c 5 -10  -5 -30  0 -40 
c 5 -20  -5 -30  0 -50

You have subtracted the two control point x/y values of the C command – won't work.

svg{
height:20em;
overflow:visible;
}
<svg viewBox="98.56 110 2.89 90">
<path id="pathPrev" 
d="M 100 200 
C 105 190 95 170 100 160 
C 105 140 95 130 100 110" 
fill="none" stroke="#000000" stroke-width="1" ></path>
</svg>

<svg viewBox="98.56 110 2.89 90">
<path id="pathPrev" 
d="M 100 200 
c 5 -10  -5 -30  0 -40 
c 5 -20  -5 -30  0 -50" 
fill="none" stroke="#000000" stroke-width="1" ></path>
</svg>

You can easily cross-check your calculations with online tools like

svg path editor
svg path commander (also usable as a library)

Mike 'Pomax' Kamermans
  • 49,297
  • 16
  • 112
  • 153
herrstrietzel
  • 11,541
  • 2
  • 12
  • 34
  • Thanks for the respons. It took a while before I knew what it meant, the words that I read, but finally it came to me. The control points are not included (in the row of relative position points calculations). – stefcas Feb 27 '23 at 08:50
  • Pardon me, I have expressed myself in an awkward way. You might also check this post ["Convert SVG Path to Relative Commands"](https://stackoverflow.com/questions/14179333/convert-svg-path-to-relative-commands) – herrstrietzel Feb 27 '23 at 16:41
  • 1
    @Mike 'Pomax' Kamermans: way better! Thanks for improving this answer. – herrstrietzel Feb 28 '23 at 01:39