Thread: SVG Tutorial
View Single Post
  #6  
Old 05-03-2009, 03:56 PM
welcomewiki welcomewiki is offline
Member
 
Join Date: Dec 2008
Location: India
Posts: 80,567
Default SVG <ellipse>

The tag is used to create an ellipse.
The Tag

The tag is used to create an ellipse. An ellipse is closely related to a circle. The difference is that an ellipse has an x and a y radius that differs from each other, while a circle has equal x and y radius.
Copy the following code into Notepad and save the file as "ellipse1.svg". Place the file in your Web directory:



"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> xmlns="http://www.w3.org/2000/svg"> style="fill:rgb(200,100,50);
stroke:rgb(0,0,100);stroke-width:2"/>

Code explanation:
  • The cx attribute defines the x coordinate of the center of the ellipse
  • The cy attribute defines the y coordinate of the center of the ellipse
  • The rx attribute defines the horizontal radius
  • The ry attribute defines the vertical radius


The following example creates three ellipses on top of each other:





"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> xmlns="http://www.w3.org/2000/svg"> style="fill:purple"/> style="fill:lime"/> style="fill:yellow"/>

The following example combines two ellipses (one yellow and one white):

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> xmlns="http://www.w3.org/2000/svg"> style="fill:yellow"/> style="fill:white"/>
Reply With Quote