Loading ...
Sorry, an error occurred while loading the content.

Re: Question about Paths

Expand Messages
  • mraceoo7
    ... sure) ... 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
    Message 1 of 4 , Jan 2, 2002
    • 0 Attachment
      --- In svg-developers@y..., "bb31516" <bblank@n...> wrote:
      > Hi,
      >
      > 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
      sure)
      > - c110,-25 is (I think) start curve at position 110 pixels over
      > 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

      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.

      good luck,

      Dennis
    • Dean Jackson
      Hi Brian, ... I think it originally stood for data. ... Being a lowercase-em m , it is a relative moveto (at least anywhere else in the path syntax it would
      Message 2 of 4 , Jan 3, 2002
      • 0 Attachment
        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
      • bb31516
        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
        Message 3 of 4 , Jan 3, 2002
        • 0 Attachment
          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
        Your message has been successfully submitted and would be delivered to recipients shortly.