Change color of vector elements

Is there any way to reference the color of vector elements created in Hype via JavaScript?

Basically I am trying to make my video player change its highlight color based on a variable, and I would like to go through all the (vector-based) UI elements and change their color based on that variable.

I tried it the usual way (give the elements a class name), iterate through that class, and… got stumped, since the Hype vector elements are SVGs contained within the divs.

Thanks for any hints.

Well, you can add ID to the element in Hype and the unique generated ID of the path is elementID_path (basically add _path to the element ID to get the ID of the path). So, you can use like hypeDocument.getElementById('elementID_path').style.fill='#212121';

4 Likes

Ah, yes, thanks, that’s a great trick.

If any other newbie like me is searching for this, here’s how I did the iteration through all the element IDs:

		var hypeSceneElm = document.getElementById(hypeDocument.currentSceneId());
	var searchResultElm = hypeSceneElm.querySelectorAll('[id^="Farbig-"][id$="_path"]');
	
	searchResultElm.forEach(changeColor)

	function changeColor(item, index, arr) {
			arr[index].style.fill = masterFarbe;
	}

Basically, I needed to give all the vector elements that needed to change colour an unique element ID in the form of “Farbig-” + “XX” (for instance a number), and then search for “Farbig-” + “_path” with the query all selector.

There is probably a more elegant way of doing that by using the class name, but if there is, I couldn’t figure it out quickly enough.

PS: Somewhat annoyingly, the circle element (which I had used as a time scrubber) is not a SVG, so that needed a special case handling…

2 Likes

Do you mean the ellipse? If so, it can be converted to a vector shape.

1 Like

You are right, thanks.

Note to self: RTFM or at least check the menus before you go ahead and program cludgy workarounds.

1 Like