CODEWITHSUNDEEP
svgellipse
SilverMoon17
SilverMoon17

Reputation: 51

How can I draw half of ellipse in SVG?

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;"/>

Upvotes: 2

Views: 2071

Answers (1)

chrwahl
chrwahl

Reputation: 13050

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 starting 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>

Upvotes: 3

Related Questions