I had forgot about this sorry.
Using unique shapes in Hype is quite tricky as you will always have the “rect” box that gets in the way.
You could reduce the size of the box so that minimum parts are overlapping. Or you could have just one large SVG inside one rectangle and then target the paths and change properties only on those paths (as I have done in the example above)
What you need to do is bring in the SVG code (not the svg as an image) first in order to target the code. What you would do is open the SVG in a text editor and copy the text and place it in the innerHTML (ALT-CMD-E) of the rectangle.
For simplicity: here is an example for you to look at. I have sourced the USA SVG online.When clicking the individual states (which all have ID’s) it moves the states left -5, top -5 and also through the use of “
<use>” we can move them to the top of the stack. Also, change colours, etc.
clickableSVG2.zip (60.4 KB)
in order for more control and animations it may be better to bring in a 3rd party library like velocity.js on that is specific to SVG manipulation.