how SVG curveTo ( C ) works?

Question

I need your help , I am confused a little.

My question is how SVG curveTo works, really I can't understand.

look for this example

<svg height="400" width="400">
 <path d="M 200 90 C 200  90 0 0 90  300 " stroke="black" fill="none" stroke-width="3"/>
</svg>

this code draws this shape

enter image description here

but really I can't understand how that done , I can't understand how the curve identified and what control points are and what 0 0 coordinate represents in my example.

http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#path_C — Alexey Ten, Jun 08 '14 at 10:32

helderdarocha · Accepted Answer · 2016-03-08T13:42:47.927

8

You are drawing a Cubic Bezier curve (with two control points). But one of the control points has the same coordinates as the starting point.

Move (M) to (200,90).
Draw a Cubic (C) Bezier Curve

a. starting at current position (200,90)
b. first control point at (200,90) - same as starting point
c. second control point at (0,0)
d. ending at (90,300)

edited Mar 08 '16 at 13:42

answered Jun 08 '14 at 11:41

helderdarocha

23,209
4
50
65

2

Where do you see the ending coordinates at (90, 30) ? I see `90 300` at the end. Did you mean for your letter d `(90,300)`? – jack blank Mar 05 '16 at 20:45
1

Yes. That's correct. It should be 300, not 30. Thank you. I'll fix it. – helderdarocha Mar 08 '16 at 13:42

score 1 · Answer 2 · answered Jun 08 '14 at 17:18

Bezier curves are a bit tricky to get the sense of. Perhaps the section at http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#path_C might help, and maybe the section before that on quadratic Beziers. As the earlier poster pointed out, having your start point and the control point coincident makes your case a bit odder, still, perhaps.

how SVG curveTo ( C ) works?

2 Answers2