Is it possible to positiong a group partly above and partly below in svg?

If it is not possible, what are alternatives then? I could break a group and move the parts around the document to get the result I want, but it would make my document a mess which will be hard to maintain, so what other options do I have here?

For instance, I would like to have the green rectangle below the orange rectangle, but above the brown rectangle and have the brown and orange rectangles under the same <g> element (i.e. in one group):

enter image description here

Here is the code:

       y="-48.470238" />
         style="fill:#a05a2c;fill-opacity:1;stroke:#999999;stroke-width:0;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
         style="fill:#ff6600;fill-opacity:1;stroke:#999999;stroke-width:0;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />

Thank you.

  • What you want is not possible in any application. You must use masks or divide the shapes (creating additional shapes) to allow the stacking you want.
    – Scott
    Jan 17, 2019 at 20:59
  • @Scott, could you, please, elaborate the idea of using masks? Thank you. Jan 17, 2019 at 21:04
  • I'm not adept enough with SVG to detail how with that markup. All I know is that logic prevents you from stacking one object at various levels. Nothing ever works that way. You have to hide portions of other objects so that it appears stacking is multi-leveled, when in reality it is not. And nothing I know of will allow you to insert something into a group which is not then part of the group itself.
    – Scott
    Jan 17, 2019 at 21:31
  • @Scott, got your point, thank you. Maybe you happen to know how I can find out the code behind the object in Inkscape? (the question is not related to the question above ( : )? Jan 17, 2019 at 21:34
  • I'm not an Inkscape user, I use Illustrator. Sorry.
    – Scott
    Jan 17, 2019 at 21:34

1 Answer 1


Here is the proof that what I want is impossible to achieve.

There are 3 objects in .svg. We will call them f, g and h. Now we want to position f above g, g above h and h above f.

Let us assume that we managed to do that. Then what color should be shown in a point where we have all of f, g and h objects? The color is undefined and hence such a positioning is contradictory and as a result is impossible.

To see that the color is undefined, try out any of three objects to have its color shown.

For instance, if we assume that the color shown is the color of f in this point, then it is impossible, because the h is above, so the color should be of the h point, but g is above h, so the g point color should be applied, but again the f is above g...

Hope that will help someone.

  • You should "accept" this as your solution to this question Feb 17, 2019 at 14:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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