Streaming live at 10am (PST)

Interactions With Separate SVG Elements


#1

Hey all,

I am currently trying to create an interaction with separately revealing elements like the one I have created here: https://goo.gl/1CjtPJ

However, I want to make every SVG shape an individual element that I can hover over separately like I made here: https://goo.gl/vT4Ztj

Lastly, I want there to be a pop-up description to describe each element like the example here: https://www.acorns.com/investments/

I am not versed in Javascript, so I am trying to do this entirely with CSS and/or WebFlow interactions. I am able to create each individual interaction, but I can’t seem to combine methods to make this work.

To summarize: I want to animate the 5 different SVG shapes while still being able to hover over each individual element to effect the styling of other elements.

Any help with this would be greatly appreciated!


Here is my public share link: https://goo.gl/1CjtPJ


#2

Hi,
This was interesting to check out. I’ve never used code embed to render svgs.

When I want to use scalable vector graphics, I turn them into a font first and then manipulate them from there. This way you can create custom hover and click states using the fonts settings in the properties panel. Really convenient if you want to change the color of your graphics or their backgrounds.
I use this program to create custom fonts: https://glyphter.com/

Once you create a font with your graphics, upload the font files to Webflow in settings. You’ll then have the graphics accessible in the fonts palette. You just have to type in the letter that corresponds with each graphic.

Then I would reconstruct the the graphic pieces using absolute positioning. Right now, your elements are positioned on top of each other. The one considered “on top” is going to be clickable while the others are essentially blocked. You’ll need to set the outer shape to a lower z-index and then each of the inner shapes will need to be positioned so that they are not overlapping each other (to be clickable). I see you have png elements uploaded. If you don’t plan to have each elements color change, I wouldn’t even bother with the svg/font route. I’d just use images.


#3

Thank you so much for your reply!

In response to your last point, my ideal situation is that the hover effect only works on the object, but not on the bounding box it is in, so PNGs would be plan C as of right now.

The svg/font aspect sounds really interesting, and I’m going to give it a try! Even if it ends up not working, it could be valuable to know in the future!

Thanks, @Port_of_Folio!


#4

Turns out it’s near impossible to line up the elements correctly, and impossible to make it responsive across different platforms/: I might have to learn JavaScript if no one else has any ideas.