Question

I’m currently creating an interactive SVG world map with a list of world language down the left and the map on the right. As the user hovers over the language names, the countries where it is spoken change their fill value. This works fine until I get to India, where I have Punjabi, Gujarati, and Hindi all spoken. The basic code works like this:

<g id="RussianL">

<path id="russia" d="blah blah blah" />

<set attributeName="fill" to="#CC3232" begin="Russian.mouseover" end="Russian.mouseout" />

</g>

…where ‘Russian’ is a text object corresponding to the word ‘russian’ on the left menu. Can I use this same strategy to represent India’s languages (3 of which need to appear on this map)? I have tried just putting in three ‘begin’ attributes but that results in none of them working (in my up-to-date Chrome and Firefox at least).

So, is there a way to do this with inline code, or will I need to use javascript/jquery, or am I just using the wrong filetype for what I’m hoping to accomplish?

Thanks!

Answer 1

You want multiple set elements each with their own begin/end.

<set attributeName="fill" to="blue" begin="Punjabi.mouseover" end="Punjabi.mouseout" />
<set attributeName="fill" to="orange" begin="Gujarati.mouseover" end="Gujarati.mouseout" />
<set attributeName="fill" to="pink" begin="Hindi.mouseover" end="Hindi.mouseout" />