interactive but simple illustration with SVG

[Super Novice]

Hello,

I am a novice in SVG. And I need to do an interactive but simple illustration.

Attached is an image with different possibilities.
http://www.zupimages.net/viewer.php?id=17/27/dv8h.jpg

I know I have to record all the blocs in colors and gray in SVG.

I do not know how do it.
Thanks a lot for your help.

[Paulie_D]

Our first question is nearly always….

“What do you have so far?”

We’re not a code-writing service. We’re happy to apply our communal knowledge, experience and expertise to help you over the hump but we have to have something to work with.

Does this all have to be HTML/CSS driven (which is unlikely) or will you want Javascript / Jquery / Other library help.

Help us help you.

[Super Novice]

Hello Paulie,

First thank you for your reply which is funny and at the same time very fair.
I also want to learn and participate. But I have little knowledge in this area to share for now.

I was thinking of Html / Css possibly Js ..

Here is approximately the principle:
https://codepen.io/Super-Novice/pen/awjwvg
in Left : parent block (fixed but interactive).
In right : child block (fixed but interactive).
– When I click in the parent block on the colored area, The corresponding part (child 1, 2 or 3) is displayed above the child block.

Here are the svg code of juxtaposable pictures :
https://codepen.io/Super-Novice/pen/awjwqz

[Super Novice]

Thank you for your Help :)

[Author]

Posts