Questions on next release and SVG interaction and Pop-ups


(Steve) #1

Hello,
Will the next release solve some of the issues we struggle with in the current release pertaining to element interaction? I’m referring to paths as elements to better isolate svgs?

Additionally, can we open a div as a pop-up that has a display:inline style so the pop-up can proportionally scale to the textual content it may present?

I’m still struggling to get svg ids to respond to mouse events… I’ll keep plugging along looking for a solution but if someone see the error I am making I’ve attached a sample file.

Thanks.SVG_mouseOver.hype.zip (275.0 KB)


(Steve) #2

UPDATE: Seems I can change the sample svg (DBears help file) but my svg with the correct id does not seem accessible.

Maybe I need better debug skills? Console output properly shows attributes but maybe the dom is placing my svg beyond range?

SVG_mouseOver_r2.hype.zip (274.8 KB)


(Steve) #3

UPDATE 2:
Definitely an issue with elements competing for the same space or blocking a lower level element.

In this first screen shot we see what should be the envelope for the group OFClow (Ohana Family Cabanas Low). Off to the left is a test svg (id=test) that currently displays a cursor of pointer on mouseover. But it is not being activated in it’s entirety due to blockage from the OFClow group.

This next screen shot shows the point where the cursor no longer changes. In other words it works if your mouse is to the left of the pointer shown but not when to the right. Yet this looks to not respect the border of the OFClow group since we should be fully outside it’s envelope.

Maybe the requirement or solution to multiple svg select elements is to somehow disable other elements from blocking the svgs as identified by their ID. Not sure that is even possible.

SVG_mouseOver_r3.hype.zip (267.8 KB)


#4

Because you have your SVG’s in separate elements then you’re always gonna have that problem. I think I may have mentioned it before but not sure, you’re gonna have to have one complete svg or alt least one BG and One overlay (for the clicks) that way you’ll be able to target the specific paths and they won’t compete for the space as they would be separate. i.e the paths will be the target of the action not the whole box.

Example

SVG_mouseover_DBear.zip (163.8 KB)

The example above has both clickable areas in one lot of code. And if you target the ID’s “OFClowEnvelope” and “WWLowEnvelope” (the backgrounds) you will see that you can click them and they don’t interfere with each other.

Personally, I would create one BG image and one SVG overlay of all the clickable areas you need and then use the approach you’re using to target the paths and take whatever actions you need.


(Steve) #5

DBear, thanks…

You make it look so easy. Knowledge is power! Thanks again.


#6

no worries. and btw Hype 4.0 won’t necessarily make this any easier as creating vectors will still have there own “container” boxes that may still interfere.


(Jonathan Deutsch) #7

(I can’t say with certainty since this hasn’t been implemented yet, but I would like to solve this interaction problem in the next version, at least for shapes made with Hype.)