I have a group of objects. It is a <g> of two rectangles. Also I have some other objects behind and in front of the group. Now I want to gray out everything except the group. How could I do that?

The image I am talking about: enter image description here

This is how I would like the grayed out version to look like (also the orange circle in front should be grayed out as well): enter image description here

Here is the code:

       y="-130.1131" />
       ry="58.208332" />
         style="fill:#cccccc;fill-opacity:1;stroke:#999999;stroke-width:0;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
         style="fill:#00ffff;fill-opacity:1;stroke:#999999;stroke-width:0;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
       ry="52.160713" />

I would like to have a general solution for the problem and to be able to apply the solution in the code if possible.

I had an idea to do it manually (just cover the necessary elements with other transparent elements and gray out in this way), but (I am telling this in order to avoid the x-y problem) I should develop an image where there will be a few groups (not just one as in this example) and when one of the groups is hovered I should gray out everything except the group which was hovered.

So, it will be very hard, cumbersome and almost impossible to implement manually if there will be something like 10 or more groups.

Thank you.


Place a partially transparent grey element visually beneath the one group you want to be in front and above the rest of the elements. If you need to do this dynamically you need to know the selector of the group that you want to be on top.

The SVG would look something like this:

    <!-- The stuff you want on bottom -->

    <!-- The grey cover -->
    <rect fill="grey" width="100%" height="100%" style="opacity: 0.6"></rect>

    <!-- The group of stuff you want on top -->
        <!-- Something in here -->

Demo here and here's a demo with interaction.

If you need to do this dynamically, you need to know the selector for the group that should be on top but it is very simple to change (I use JavaScript here for convenience, but this could be any scripting language).

let topElem = document.querySelector(".top");
let svg = document.querySelector("svg");

Demo of that

  • Very great. But what could I do about the orange circle in the case? Thank you. – iamyourfriend Jan 17 at 18:07
  • I mean I do not know beforehand what objects will be above the group which I want to highlight and those objects above should be grayed out as well. – iamyourfriend Jan 17 at 18:09
  • If you need it to be dynamic, you will need to know the selector of the group that you want on top. Then you need to use a script to rearrange the order as necessary. I edited my post to include that as well – Zach Saucier Jan 17 at 18:21
  • I am sorry that there is a confusion here, but your update does not solve the problem. I want the orange circle to still be above the group, but being grayed out anyway. Thank you a lot for the attempt to help me (y) – iamyourfriend Jan 17 at 20:22
  • With this message: I mean I do not know beforehand what objects will be above the group which I want to highlight and those objects above should be grayed out as well. I tried to point out not that your solution is not dynamic, but that your solution does not solve the problem with the layer above the group. Again I am sorry for the confusion and thank you. – iamyourfriend Jan 17 at 20:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.