Using SVGs as region triggers?


(Steve) #1

Can someone comment on Best Practices to make an unusual shape a trigger for MouseOver and Selections?

The attached image shows two regions that need to be selectable, both in triggering a MouseOver and then link to a different Scene.

Can I create the shape as an SVG give it no fill color or stroke, yet still used for creating a selection? Is it as simple as assigning an ID to the SVG when it is created and then setting it’s Opacity as zero? Will it still be present for selection/interaction?

The reason for this requirement is that rectangular slices overlap creating inaccurate selection areas. There isn’t an image mapping option is there?

Thanks in advance for any help.


(Steve) #2

Update: Seems that setting an Object (SVG) to an Opacity of zero will still allow it to be present on the Stage where you can assign Events such as OnClick etc…

Attached image is shown as partial opacity but works just as well when set to Zero.

Unfortunately it is still present as a Rectangle bounding box…

So, we’re half way there at least!


#3

Option click + drag is a pretty quick way to draw with ellipses by duplicating dragged items:

52 PM

To answer your question, at the moment there is not a way to do this.


(Steve) #4

Thanks Daniel, Having a pen tool that draws SVG would be a good feature in the next version (as well as playing image sequences) :slight_smile:

I thought I saw a post from DBear that targeted clicks based on an ID from within the SVG? I will search for that solution.


#5

You’re going to enjoy our next release.


(Steve) #6

I submitted to be able to Beta but got no reply :confused:

Can I upgrade today? :slight_smile: If it allows me to achieve my goals, I’m in!


(Steve) #7

I’ve created an Element, then used InnerHTML to set the values of an SVG that contains an id of Asset-1
Next, there is a function that recognize the SVG:

function onLoadListeners(hypeDocument, element event) {

	var area1 = document.getElementById('Asset-1')
	
	area1.addEventListener("onclick",  function () {
		
		alert ('Hello World!');

}

Is there some other reason this is not working?

ParkMap.hype.zip (1.9 MB)


(Steve) #8

Figured it out… Working sample attached
svgShapeLayers.hype.zip (39.8 KB)


(Colin) #9

Steve,
check this link

Colin