I looked around and didn’t find this specifically addressed, sorry if it’s a really basic question. I’m trying to create interactive/ clickable graphics that are unique shapes, but the clickable area is always the bounding rectangle of that shape, which is true also of elements created inside hype, such as a circle. I’ve tried .png’s and .svg’s. Is it even possible to create a non-rectangular shape where the interactive area matches the shape exactly?
You can’t create the non-rectangular shape in Hype but you can add SVG code inside a rectangle and then proceed to give parts of the code id which you can attach event listeners (in a function on scene load) to such as mouseover and click. These listeners will only react to the parts of the SVG. So you won’t have the problem of the bounding box.
Here is an example with 1 rect with SVG code and another on top partially covering the mouseover area.
https://dl.dropboxusercontent.com/spa/wkk989fyyvlf2kz/Exports/clickableSVG/clickableSVG.html
This is a workaround until Hype creates shaped elements
5 Likes
Thanks, that’s exactly what I was hoping to achieve. Not knowing code, your solution may be above my head, but I’ll look into it more.
Good at least know it’s not natively possible at this point so will look further into what you’ve suggested.
Thanks!
Hi @harpfish
Sorry been away but here is an easier example for you to follow. Maybe it will help.
clickableSVG.zip (16.9 KB)
2 Likes
Thanks so much for providing another example, I’m asking a co-worker to help me understand a bit more how this works and which bits of code need tweaking so your examples should be very helpful. My hope is this is a process that can be dialed in and repeated fairly easily. Maybe wishful thinking… 
Your example has all in one. Is it possible to do get the same result, but with multiple SVGs in multiple rectangle elements?
Sure Jeff,
Not sure in your set up though so can’t really give you a specific solution. Basically, SVG paths can have ID’s or classes applied to them and it’s with this you can add an event listener for a click to it in order to create interaction.
Here’s a little test I initially worked on, trying to figure it out. 
Basically, I have some rectangles overlapping others, which prevents the accurate rollover.
test-idaho.hype.zip (44.9 KB)
Hi @jjrtist
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.
1 Like
Thanks for the response and example, @DBear ! As I’m more comfortable using timelines than javascript, this will be a big help. Velocity.js might be above my head for now, but I’ll take a look. Thanks again!
1 Like
Thought I’d share where I’m at with this project. I’ll have to see if I can alter it according to your suggestions, but for now, each of the states is SVG code, with mouse over/out actions applied, and some functions to push them frontward or backward to help with the hover state.
1 Like