SVG with RaphaelJS - Creating Basic Shapes - Drawing Ellipses with RaphaelJS

Welcome to this section of the weekly series SVG with RaphaelJS. This week we will be working with ellipses. Last week we took a comprehensive look at working with circles in RaphaelJS.

I must add that the repository for this series can be found here. Please download it and run the individual examples if you want to follow along in this series. From this week henceforth, I will only link to the specify example in my Dropbox folder. If you want a copy of the code, please download it from the GitHub repository.

In RaphaelJS, we create an Ellipse using the ellipse() method. The syntax of this is Paper.ellipse(x, y, rx, ry) where x and y represent the position of the ellipse on the paper while rx and ry represent the horizontal radius and the vertical radius of the ellipse respectively.

The horizontal radius is the width of the ellipse divided by 2 while the vertical radius is the height of the ellipse divided by two.

The code to create an ellipse at the middle of our paper is given below (ellipse):

	$(function(){ var paper = Raphael('container', 500, 500);
	var ellipse = paper.ellipse(250, 250, 100, 50);
	});

You can view the result here.

So there you have it. An ellipse in all its glory. Its your basic ellipse with no styling at all.

For the sake of review, let's change its fill, stroke and make its stroke-width 2. Our init.js thus becomes:

	$(function(){ var paper = Raphael('container', 500, 500);
	var ellipse = paper.ellipse(250, 250, 100, 50).attr({
	"fill":"#FF0000",
	"stroke":"#FF0000",
	"stroke-width":2
	});
	});

You can view the result here.

Animating the Ellipse

We are going to write code to animate the ellipse to a circle. So before your very eyes, an ellipse would change into a circle. The trick is to understand that a circle is a special case of an ellipse where rx = ry.

Our init.js thus becomes:

	$(function(){ var paper = Raphael('container', 500, 500);
	var ellipse = paper.ellipse(250, 250, 100, 50).attr({
	"fill":"#FF0000",
	"stroke":"#FF0000",
	"stroke-width":2
	});
	ellipse.animate({
	ry: 100,
	transform:"s2"
	}, 5000);
	});

Its pretty cool watching the ellipse grow into a circle and increase in size. You can check it out here.

Add JavaScript events to the element

In order to get your element to be used to visit another website, you need to use the href function. The anchor tag <a> in HTML is where the href function is used. However, in this case, we shall use it with the document.

Our init.js thus becomes:

	$(function(){ var paper = Raphael('container', 500, 500);
	var ellipse = paper.ellipse(250, 250, 100, 50).attr({
	"fill":"#FF0000",
	"stroke":"#FF0000",
	"stroke-width":2,
	"href": "http://trustondevcenary.com",
	"target": "blank"
	});
	/* ellipse.click(function(){
	document.location.href = "http://trustondevcenary.com";
	}); */
	});

You can view the result here.

When we click on the ellipse, it directs us to my portfolio page. This is a simple way to visit a website from an element on your page when the element is clicked.

The commented out section shows a previous attempt at linking to the site. The advantage with the method I originally chose is that it opens the page in a new tab.

A note on my portfolio website. When you visit my portfolio website and you check out the portfolio section, do click on the project represented by the map of Africa on it. Countries in Africa is the reason I believe I am qualified to teach you about SVG using RaphaelJS.

I developed the first version of Countries in Africa in 2013. You can read about it here. Last week was when I finished the current version on my portfolio website after a 1 year hiatus from coding the project.

All told, the first version took me 6 months to complete. In those 6 months, I scoured the internet for almost everything I could find on RaphaelJS. In the end, I was successful in completing the project.

In the next section, we shall look at how to work with rectangles in RaphaelJS.