Changing Z-Order in SVG

ktewes · August 16, 2023, 6:49am

Hello everyone. I'm switching from a 'homemade' map of Germany to an SVG version. Everything works fine - the only problem: When hovering with the mouse, I change the color of the outlines. To ensure that this is clearly visible and not possibly obscured by other federal states, I change the Z-order in the SVG and bring the active state to the front. However, this results in the 'landlocked' states Bremen and Berlin being inaccessible, as they are located within the shapes of Brandenburg and Lower Saxony, respectively, and are effectively surrounded by them. I'd like to solve this problem without using additional Hype elements or the like - just within the code/SVG. You can find the corresponding function in dpa_initMap() in the mouseover event listener definition. Many thanks in advance!

mapOfGermany.zip (87.1 KB)

Photics · August 16, 2023, 8:34am

Theoretical solutions…

Solution #1 — Don't use borders. Change the background color of the state. The borders might be easier to do with inner stroke, but that seems to be a problem with SVG shapes on the web… https://caniuse.com/?search=stroke-alignment

Solution #2 — Double your graphic. On a second overlaying SVG image, that ignores mouse events, only borders could be displayed. (Downside: more HTML!)

Solution #3 — Tiered Z-order — The inner states could have an !important inline z-index value, like 100. Then, on mouse over, change the z-index to 50. The inner states merely laugh at the feeble attempt to change the z-index.

ktewes · August 16, 2023, 8:49am

Hi, thanks a lot for your quick response.

#1 is not an option as the use of color and thickness changes of outlines is a requirement from our editorial team.
#2 I've thought about that as well, it would work but it's not very elegant...
#3 I don't understand that... Could you explain it in more detail?

Best regards, Kalle

Photics · August 16, 2023, 12:28pm

It's not very elegant code-wise, but would the viewer even notice?

This is not my preferred solution, but apparently you're hitting a problem with web design.

————————— Tiny "Landlocked" state ———— z-index 100 !important
—————— Selected State ———————————— z-index 50
——— Other States ———————————————— z-index 1

Since the center states don't block view of the larger states, those “landlocked” state can always be on top…

style="z-index: 100;"

You might not even need… !important

Basically, you're having to change the z-index because the states overlap each other on the borders. However, those landlocked states are in the middle. They have no such overlap. They can be at a higher z-index all the time — yes / no?

SVG elementscan have classes too. “path” mentioned here… https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/class …so maybe using "landlocked" class is an alternative to inline styles.

MarkHunte · August 16, 2023, 7:05pm

Maybe all you need to do is add this after line 63

	    	function bringToTopofSVG(targetElement){
  				let parent = targetElement.ownerSVGElement;
  				parent.appendChild(targetElement);
			}
				
			if (elmClass == "Berlin" || elmClass =="Bremen"){
	    
	    		bringToTopofSVG(elm);
	    
	    	}

credit : javascript - How to use z-index in svg elements? - Stack Overflow

Also maybe change

elm.setAttribute('stroke', strokeOverColor);

to

 if (elmClass == "Berlin") {
elm.setAttribute('stroke', "#76D6FF");
								
} else {
								
	elm.setAttribute('stroke', strokeOverColor);
}

Although on that last bit you could just simply change the stroke colour when mouse over to something not the same as the fill colour?

MarkHunte · August 16, 2023, 11:01pm

Above seems to work well,

But I noticed a lot of artefacts with the tooltip.

This on my M1 Mac, so I suspected that the the dpa_startTooltip() mouse move code and looked for an alternative to get your tooltip to follower the cursor.

This does it by replacing the cursor with the tooltip element.

The one thing about using a custom element it seems is the element scales down.
After a lot of trying in code it to get the scale back I finally managed to increase the size of the tooltip element and font size using the normal hype ways in the inspector. go figure?.

Also increased the padding in the css.

The newCursor() function runs on scene load.
The dpa_startTooltip() is not used.

This works really well and no artefacts and much crisper.

I got you left/right offset working also.
example with the changes..

mapOfGermany_mhv1.hype.zip (89.9 KB)

The new code for the tooltip/cursor

//Credit : https://www.freecodecamp.org/news/how-to-make-a-custom-mouse-cursor-with-css-and-javascript/

const cursorPointed = document.querySelector('.toolTip');
 

const moveCursor = (e)=> {
const mouseY = e.clientY;
const mouseX = e.clientX;
   
  
cursorPointedWidth  = cursorPointed.getBoundingClientRect();
cursorPointedWidth  = cursorPointedWidth.width;
cursorPointedHeight = cursorPointed.getBoundingClientRect();
cursorPointedHeight = cursorPointedHeight.height;

		
	
if (window.direction == 'li'){

	offX = (cursorPointedWidth)*-1.05;
	offY = (cursorPointedHeight)*-0.1;

} else {
	
	offX = (cursorPointedWidth)*0.05;
	offY = (cursorPointedHeight)*0.1;
}



 cursorPointed.style.transform = `translate3d(${mouseX + offX}px, ${mouseY + offY }px, 0)`;
 
		
 
}

window.addEventListener('mousemove', moveCursor)

ktewes · August 17, 2023, 5:13am

Wow! That's really great. Thanks a million Mark for your help! Simply invaluable!! The map works like a charm now!

Maybe all you need to do is add this after line 63

That´s exactly, what I was looking for.

But I noticed a lot of artefacts with the tooltip.

Yes, that's an effect that apparently only occurs in Safari. I experienced something similar on the iPhone - in that case it happened when symbols were moved that contained elements with shadows. I was able to fix this by adjusting the bounding-box of the symbol which was apparently to small...

The newCursor() function runs on scene load.
The dpa_startTooltip() is not used

And - wow! again!! That's a really clear, well-organized code. I've always struggled with the MouseOver...

Here you can see the preliminary version, including the mobile variant.