http://www.w3.org/TR/SVG11/paths.html#PathDataEllipticalArcCommands
The command is as follows: A|a(rx ry x-axis-rotation large-arc-flag sweep-flag x y)+ Here is a small explanation: 1. large-arc-flag - There are *always* two directions you could draw a circle (or arc) through two points. Therefore, you need to decide if you want the larger or the smaller of the two arcs. To select the larger arc, put a 1 here. For the smaller put a 0. In your case, you only want a quarter of the arc (to round that corner), so you need to put in a 0. If you say wanted > 1/2 of the arc, you would put in a 1. For a good example of how the large-arc-flag is used, see the following example from the spec: http://www.w3.org/TR/SVG11/images/paths/arcs02.svg 2. sweep-flag - Simply the direction that the arc will be drawn from the previous point to the end x/y. 0 is for clockwise, 1 is for counter-clockwise. 3. x-axis-rotation - This is used if you are drawing an arc that has uneven rx/ry values. This will decide how the arc is aligned (the rx/ry axis). See the following example (from the spec) for how this rotation is accomplished: http://www.w3.org/TR/SVG11/images/paths/arcs01.svg I didn't fix your tab perfectly, but here is something that is a bit closer to what you want. You'll have to play with it to get it working nicely. Best thing to do is pull out a piece of graph paper and just do the math. :) <path fill="#C9C6B2" d=" M 0,300 L 100,50 A 100,50 -60 0,1 150,0 L 650,0 A 100,50 60 0,1 700,50 L 800,300 Z" /> Alastair http://spark.sourceforge.net --- In svg-developers@yahoogroups.com, "ariadadev" <[EMAIL PROTECTED]> wrote: > Hi there, > > I'm stuck with drawing arcs. I've got the following SVG: > > <svg xmlns="..." xmlns:xlink=".." x="0" y="0" width="800" height="300"> > <style type="text/css"> > .textStyle > {text-anchor:middle; > font-family:sans-serif; > font-weight:bold; > font-size:26pt; > color:#000000} > </style> > > <path fill="#C9C6B2" d="M0,300 L100,50 > A150,50 0 0,0 150,0 > L650,0 > A650,50 0 0,0 700,50 > L800,300 Z" /> > > <text class="textStyle" x="400" y="200">Cover</text> > </svg> > > which is supposed to generate a little user interface tab widget (I've > multiplied all the dimensions by 10). > > Its supposed to be a trapezoid (is that right?) with rounded top > corners. But both my arcs are inverted (I think, or at least their > wrong anyway). > > I don't understand what the middle arguments for the arc path command > are for. The W3C specification is beyond my ability to understand! > > Can anyone explain how to make these arcs work? > > Cheers, > ariadadev ----- To unsubscribe send a message to: [EMAIL PROTECTED] -or- visit http://groups.yahoo.com/group/svg-developers and click "edit my membership" ---- Yahoo! Groups Links <*> To visit your group on the web, go to: http://groups.yahoo.com/group/svg-developers/ <*> To unsubscribe from this group, send an email to: [EMAIL PROTECTED] <*> Your use of Yahoo! Groups is subject to: http://docs.yahoo.com/info/terms/
