如何用SVG路径绘制字母S

Question

This is probably SVG 101 for most, however, I need to draw a letter 'S' using a path. I can make a bunch of lines, but it seems two arcs would be the way to get it done smoothly.

This is what I have done so far..

<svg width="100" height="100">
  <path d="M20 100 L20 80 L60 80 L60 60 L20 60 L20 0 L80 0 L80 20 L40 20 L40 40 L80 40 L80 100 Z" stroke-linejoin="round" stroke="#808600" stroke-width="0" stroke-linecap="round" fill="#1EB287" transform="translate(0,0)">
</svg>

Answer 1

Yes, you can draw a simple S using two arcs the way you suggested. Here's one simple possibility:

<path stroke-width="4" fill="none" stroke="black"
  d="M70 30 A20 20 0 1 0 50 50 A20 20 0 1 1 30 70" />

The following is a fuller explanation.

There are several different ways in svg to draw a curved line. For this use case, ie making a letter S, one of the simplest ways is to use two portions of circles, specifically two 3/4-circles. You would use the arc (A/a) command in the 'd' string of the path. See the MDN documentation and the SVG spec for more information about how to create arcs.

In short, after providing the starting coordinates of your arc (eg with a preceding 'M', for 'move', command) use 'A' (or 'a') to indicate an arc segment using absolute (or relative) coordinates. (I chose absolute, 'A'.) Then supply the following, in order:

• the x arc radius in pixels
• the y arc radius in pixels: I've made these first two the same as each other so that the arcs are portions of circles not ellipses.
• the x-axis rotation in degrees: This is only useful for elliptal arcs and is irrelevant for circular arcs because rotating a circle is unnoticeable. Thus leave this at 0.
• the 0-or-1 large-arc-flag: On a clock face you can go from 3 o'clock to 6 o'clock (or from 12 o'clock to 9 o'clock, which have identical relative positions) two different ways, the short way (flag=0) ie through 4 & 5 o'clock, or the long way (flag=1) ie through 2, 1, 12, 11, 10, 9, 8, and 7 o'clock. See my diagram below.
• the 0-or-1 sweep flag: You can draw an arc between two points moving in the negative-angle direction, ie counter-clockwise (flag=0) or the positive-angle direction, ie clockwise (flag=1). See my diagram below.
• the final x-coordinate in pixels and
• the final y-coordinate in pixels

I made the following diagram to better explain the two flags, ie the large-arc-flag and the sweep-flag, in the arc command. In each of the four scenarios, the start and end coordinates and the circle radius are always the same. The only things that change are those two flags. You can see how changing those flags changes the resulting arc.

The example below shows a simple S drawn in red using a path that includes a starting coordinate followed by two such arcs. To make it obvious where those arcs are, I have also superimposed on top of that full 'S' path two other individual arcs, thinner and colored blue and green, which correspond to the first and second arc parts of the full red 'S'. With respect to the values of the two flags the blue arc corresponds to the one labeled "C" in the diagram above while the green arc corresponds to the one labeled "D".

 <svg width="400" height="300"> <g transform="translate(20,20)"> <g stroke-width="40" fill="none"> <path d="M100 50 A50 50 0 1 0 50 100 A50 50 0 1 1 0 150" stroke="red" /> </g> <g stroke-width="8" fill="none"> <path d="M100 50 A50 50 0 1 0 50 100 " stroke="blue" /> <path d=" M50 100 A50 50 0 1 1 0 150" stroke="green" /> </g> </g> </svg> 

Using the 'arc' (ie 'A'/'a') command to draw curves in SVG can be challenging, but not impossible. This is, however, the simplest way to implement the type of curve you were requesting.

Note that I've also simplified the path by programming the trajectory of the centre line of the 'S' curve and just made the stroke 20 pixels wide. This contrasts with what you tried to do which was to draw an outline, ie provide coordinates for all the edge points. Even your block-y squar-ish 'S' could have been simpler if you used a stroke of 20 pixels and then just drew the centre line. You can draw an outline if you want to, and sometimes you'll want to, eg to give you the power to draw the shape any way you want. However, if you expect the thickness of your path to remain constant, then thicken your stroke and draw just the centre line.

Answer 2

I've been working on a private (but public) javascript library to script the path you described above. You can see it in action at www.stretchsketch.com and the library is on github

Not sure what you're asking but I think the shortest way to create an S in SVG's path d-attribute would be to use bezier curves .

Typically arcs are 101 x 101 very powerful but way too hard for 99% of its usecases.