Object with higher z-index goes UNDER object with lower z-index.

[Mithun]

Hi Syncfusion team,

I have a diagram with two object in it.

• A native symbol (Svg) with z-index = 2
• A custom image with z-index = 3.

From this gif, you can see that the custom image (which has higher z-index) is going under the native symbol (of lower z-index).

Diagram json is attached.

Please let me know if any additional details are needed to investigate.

Thanks,

-Mithun

PS: The diagram was initially created using a slightly older version of the diagram component (18.4.49). But the diagram json is now loaded in the latest version (19.3.55) in above gif.

Attachment: zindexissue_4a55abb5.zip

[Sivakumar Sekar]

Hi Mithun, 

By default, in the diagram, we have rendered the SVG nodes inside the Native layer. Please refer to the below screenshot  

 

   

We have rendered all other normal nodes and connectors inside the diagram layer.  

   

So in our end, in the diagram at first we have to append the diagram layer at first and then render the Native layer after that. So normal nodes and connectors render behind the SVG nodes. So if we render the image node then it gets render behind the SVG node and does not get visible. This is the default behavior of the diagram layers.  

Regards, 

Sivakumar