Interactive SVG / control through links

Question

As I'm just entering SVG (never used this before) i have few questions concerning manipulating svg object.

http://pastebin.com/VTXLwJrq

This is an image of a bicycle, nothing special. Some parts has got own ID like (tyres, frame, fork etc.).

What I want to achieve? Two goals: + manipulate color (fill or stroke; item depend) through links () + make some part of svg selectable.

Mechanism: + User click on specific part of svg, e.g. on tyre (select item to change), + then he click on a hyperlink which will change its color for e.g. red

It wont work when I add a link before each svg elemnt (inside) so I assume I need to do it through jquery. is there any documentation which explain that? or rather I should focus on some kind of JS library like Raphael or other?

thanks!

Answer 1

Okay, your lucky day as I'm not busy right now so I have time to hard code this for you. SEE WORKING DEMO HERE

You can definitely controlling the color using JQuery, or even standard css. The demo used JQuery and UI. I also left a hover sample in pure css for the inner circle of the tyres.

#felgi:hover circle {
    stroke: green;
    fill: silver;
}