Since the previous post, I've updated the Opera market share map somewhat. Now instead of having an automatically playing list of data, you can access the data by hovering over the specific country, and the country in question will also highlight.
For the country highlight I used mouse events on the country’s
path element. I added a
set element as a child of the
path element which changes the
class attribute to
active. To add the mouse events, I added the code
begin="mouseover" end="mouseout", which is fairly self-explanatory. For displaying the market share data it is slightly more complicated, as I wanted the action to happen on a different element to the active element – in this case the
text elements. This also isn't too difficult when you know how. On the
animate elements used by the
text elements, I also used mouse events, but had to say which element triggers the animation. In the case of Belarus, I used code such as
begin="by.mouseover" end="by.mouseout" which says to begin the animation when the element with the ID
by has a mouse over event and ends when the same element has a mouse out event. I chain a number of animations. The first (where the code sample is from) is a
set element to set the visibility of the text element, and the next two are
animate elements to fade in and fade out the text element by changing the
opacity value. You can chain as many of the different animation elements as you'd like. If you are wondering what the difference is between
animate, set only changes the value once and happens without interpolation (i.e. is on or off, black or white), while with animate, there can be a series of value changes and it animates between the values (so opacity 0 to 1 will animate through each step from 0 to 1, instead of fully transparent to fully opaque).
As well as changing the interaction, I also compressed the file using GZip and changed the extension to svgz. This reduces the file size and tells the browser to decompress the file before passing it to the SVG engine for rendering. Many web servers may not be set up to handle svgz files (so the browser will get confused), so you may have to add the HTTP Header to your configuration file. In Apache I did this using the following instructions. This allows Opera and Safari to know the data is GZip compressed, but doesn't seem to work for Firefox at the moment. I'm not 100% sure why yet.