2

How can I draw half of ellipse in SVG? What I'm trying to do

<path d="M 198, 160 a 50,20 1 1,0 1,0" fill="pink" style="fill:pink;stroke:black;stroke-width:1;"/>
Zoe
  • 27,060
  • 21
  • 118
  • 148
SilverMoon17
  • 49
  • 8
  • 1
    Use an SVG editor such as Inkscape to draw whatever you want. – Robert Longson Feb 22 '22 at 15:16
  • 2
    try this d attribute: `d="M 198, 160 a 50,20 1 1,0 0,40 z"` Also please read about arcs in svg: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths#arcs – enxaneta Feb 22 '22 at 17:18

1 Answers1

3

You already found the right command for your path; the elliptical arc curve.

In these examples I created half-ellipses with the same dimensions. You can see the two numbers after the A are all 10 and 2. 10 is the x radius and 2 the y radius. The two numbers after M are all stating points and the two numbers just before Z are the end points. The three numbers in between (0 0 0 and 0 0 1) are different flags. The only one I use here is the sweep-flag that indicates clockwise or anticlockwise.

A usefull tool that I use a lot for creating paths is this: SvgPathEditor.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 8">
  <path transform="translate(0 0)" fill="blue"   d="M 10 0 A 10 2 0 0 0 10 4 Z"/>
  <path transform="translate(10 0)" fill="pink"  d="M  0 0 A 10 2 0 0 1  0 4 Z"/>
  <path transform="translate(0 4)" fill="orange" d="M  0 2 A 10 2 0 0 1 20 2 Z"/>
  <path transform="translate(0 6)" fill="lime"   d="M  0 0 A 10 2 0 0 0 20 0 Z"/>
</svg>
chrwahl
  • 8,675
  • 2
  • 20
  • 30