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.