- --- In svg-developers@y..., "bb31516" <bblank@n...> wrote:
> Hi,

sure)

>

> I am having trouble with the Path statement, I don't understand.

> Can someone explain it to me.

>

> I have the statement below:

> I understand d="" is draw

> - m60,126 is moveto 60,126. ( x,y i guess this is pixels.. not

> - c110,-25 is (I think) start curve at position 110 pixels over

Hi Brian,

> and -25 pixels (up). Thats fine.

> - 70,-65 is my ending point.. 70 pixels over from starting point

> and -65 pixels up from starting point.

>

> <path d="m60,126 c110,-25 5,5 70,-65" style="stroke:red;

> fill:none;" />

>

> What I don't understand is where I have 5,5.

> What do these numbers mean exactly???

> I have tried different numbers, it just doesn't turn out right.

> I just want a simple curve from lower left to upper right.

> The way it is written, it doubles back and then curves into 70,-65.

>

> Am I using the right type of curve, Bezier curve?

> I have seen other examples and they have simple curves.

> I have looked on the Internet and cannot find a simple

> answer as to what the numbers mean.

>

> Can anyone help me please. Yes I'm new, but learning.

>

> Thanks, Brian

The c command in the path statement takes 3 x,y combinations.

The first one is the start direction. The second the end direction

and the last one the end point of the curve.

For example:

<path d="c10,0 10,0 10,-10" style="stroke:red; fill:none;"/>

makes a curve from bottom left to top right.

good luck,

Dennis - Hi Brian,

On Wed, 02 Jan 2002, mraceoo7 wrote:

> > I am having trouble with the Path statement, I don't understand.

> > Can someone explain it to me.

> >

> > I have the statement below:

> > I understand d="" is draw

I think it originally stood for data.

> > - m60,126 is moveto 60,126. ( x,y i guess this is pixels.. not

> sure)

Being a lowercase-em "m", it is a relative moveto (at least anywhere

else in the path syntax it would be - here it is the first command

so it is the same as an absolute moveto).

> > - c110,-25 is (I think) start curve at position 110 pixels over

> > and -25 pixels (up). Thats fine.

Not quite. "c" means draw a cubic bezier. As it is lowercase, the

coordinates are relative rather than absolute.

The next coordinate (100,-25) is the offset to the first control

point (ie. draw a line from the current point (110,-25) to (210, -50)

and that is the tangent of the start of the curve).

> > - 70,-65 is my ending point.. 70 pixels over from starting point

> > and -65 pixels up from starting point.

This is the offset from the current point (the start of the curve)

that defines the second control point. A line between this second

control point and the final point (the third coordinate in the syntax)

is the tangent to the curve at the final point.

> >

> > <path d="m60,126 c110,-25 5,5 70,-65" style="stroke:red;

> > fill:none;" />

> >

> > What I don't understand is where I have 5,5.

> > What do these numbers mean exactly???

> > I have tried different numbers, it just doesn't turn out right.

> > I just want a simple curve from lower left to upper right.

> > The way it is written, it doubles back and then curves into 70,-65.

> >

> > Am I using the right type of curve, Bezier curve?

Yes.

In other cases it just depends on what you want. You cannot, for

example exactly represent a circular arc with a cubic bezier, but

you probably would never notice the difference (in fact, most

viewers do this anyway). Sometimes you might be able to use a more

simple quadratic bezier (only one control point).

> > I have seen other examples and they have simple curves.

> > I have looked on the Internet and cannot find a simple

> > answer as to what the numbers mean.

> >

> > Can anyone help me please. Yes I'm new, but learning.

> >

> > Thanks, Brian

>

> Hi Brian,

>

> The c command in the path statement takes 3 x,y combinations.

> The first one is the start direction. The second the end direction

> and the last one the end point of the curve.

>

> For example:

> <path d="c10,0 10,0 10,-10" style="stroke:red; fill:none;"/>

>

> makes a curve from bottom left to top right.

While this probably works in some SVG viewers, it is unfortunately

invalid since all path commands must begin with a moveto command.

(for the gory details check out Section 8.3.9). Yes, it's picky

I know :)

Dean - Thanks...

I think I'll have to read it a few times to understand it though...lol

I think I got the MoveTo and different curve commands.

The control points is what I don't quite understand.

I did figure out how to get the curve I wanted, but I don't understand

the numbers and how they relate.

I'll re-read your explantion and try to figure it out.

Thanks, Brian

--- In svg-developers@y..., Dean Jackson <dean@w...> wrote:

> Hi Brian,

>

> On Wed, 02 Jan 2002, mraceoo7 wrote:

>

> > > I am having trouble with the Path statement, I don't understand.

> > > Can someone explain it to me.

> > >

> > > I have the statement below:

> > > I understand d="" is draw

>

> I think it originally stood for data.

>

> > > - m60,126 is moveto 60,126. ( x,y i guess this is pixels.. not

> > sure)

>

> Being a lowercase-em "m", it is a relative moveto (at least anywhere

> else in the path syntax it would be - here it is the first command

> so it is the same as an absolute moveto).

>

> > > - c110,-25 is (I think) start curve at position 110 pixels over

> > > and -25 pixels (up). Thats fine.

>

> Not quite. "c" means draw a cubic bezier. As it is lowercase, the

> coordinates are relative rather than absolute.

>

> The next coordinate (100,-25) is the offset to the first control

> point (ie. draw a line from the current point (110,-25) to (210, -

50)

> and that is the tangent of the start of the curve).

>

> > > - 70,-65 is my ending point.. 70 pixels over from starting

point

> > > and -65 pixels up from starting point.

>

> This is the offset from the current point (the start of the curve)

> that defines the second control point. A line between this second

> control point and the final point (the third coordinate in the

syntax)

> is the tangent to the curve at the final point.

>

> > >

> > > <path d="m60,126 c110,-25 5,5 70,-65" style="stroke:red;

> > > fill:none;" />

> > >

> > > What I don't understand is where I have 5,5.

> > > What do these numbers mean exactly???

> > > I have tried different numbers, it just doesn't turn out right.

> > > I just want a simple curve from lower left to upper right.

> > > The way it is written, it doubles back and then curves into 70,-

65.

> > >

> > > Am I using the right type of curve, Bezier curve?

>

> Yes.

>

> In other cases it just depends on what you want. You cannot, for

> example exactly represent a circular arc with a cubic bezier, but

> you probably would never notice the difference (in fact, most

> viewers do this anyway). Sometimes you might be able to use a more

> simple quadratic bezier (only one control point).

>

> > > I have seen other examples and they have simple curves.

> > > I have looked on the Internet and cannot find a simple

> > > answer as to what the numbers mean.

> > >

> > > Can anyone help me please. Yes I'm new, but learning.

> > >

> > > Thanks, Brian

> >

> > Hi Brian,

> >

> > The c command in the path statement takes 3 x,y combinations.

> > The first one is the start direction. The second the end

direction

> > and the last one the end point of the curve.

> >

> > For example:

> > <path d="c10,0 10,0 10,-10" style="stroke:red; fill:none;"/>

> >

> > makes a curve from bottom left to top right.

>

> While this probably works in some SVG viewers, it is unfortunately

> invalid since all path commands must begin with a moveto command.

> (for the gory details check out Section 8.3.9). Yes, it's picky

> I know :)

>

> Dean