XML/SVG/ellipse

Circular and Elliptic Arcs

   <source lang="xml">

<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"

 "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">

 <g transform="translate(50,20)">
   <path d="M200,100 v-100 a100,100 0 0,0 -100,100 z" fill="white"
     stroke="blue" stroke-width="2" />
 </g>
 <g transform="translate(300,220)">
   <path d="M200,100 v-100 a100,100 0 1,1 -100,100 z" fill="red"
     stroke="blue" stroke-width="2" />
 </g>

</svg>

</source>
   
  

Linear Gradient Ellipses

   <source lang="xml">

<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN"

"http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd">

<svg width="100%" height="100%">

 <defs>
   <linearGradient id="gradientDefinition"
     gradientUnits="userSpaceOnUse">
     <stop stop-color="yellow" offset="0%" />
     <stop stop-color="black" offset="100%" />
   </linearGradient>
 </defs>

 <ellipse cx="250" cy="150" rx="200" ry="100"
   stroke-dasharray="8 8 8 8" stroke="red" stroke-width="4"
   fill="url(#gradientDefinition)" />

</svg>

</source>
   
  

Radial Gradient Ellipses

   <source lang="xml">

<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN"

"http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd">

<svg width="100%" height="100%">

 <defs>
   <radialGradient id="gradientDefinition"
     gradientUnits="userSpaceOnUse">
     <stop stop-color="yellow" offset="0%" />
     <stop stop-color="black" offset="100%" />
   </radialGradient>
 </defs>
 <ellipse cx="250" cy="150" rx="200" ry="100" stroke="white"
   stroke-width="1" stroke-dasharray="1 1 1 1"
   style="fill:url(#gradientDefinition)" />

</svg>

</source>
   
  

Using an SVG ellipse Element to Render Ellipses

   <source lang="xml">

<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN"

"http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd">

<svg width="100%" height="100%">

   <ellipse cx="120" cy="80"
            rx="80" ry="30"
            style="fill:rgb(255,0,0)"/>
   <ellipse cx="120" cy="160"
            rx="80" ry="30"
            stroke="blue"
            stroke-width="8"
            stroke-dasharray="1 1 1 1"
            style="fill:rgb(255,0,0)"/>

</svg>

</source>