I have an SVG that's meant to be a responsive web button:
After some trial and error, I've noticed it doesn't look great at extreme widths: the vertical borders get thinner and thicker as the viewport shrinks and grows, respectively. I thought I could solve this with border-image-slice, but as you can see in that link, it's not as straightforward as I would've hoped, and my gut tells me it can't solve the problem I'm facing.
So, here's my next idea: I'll make two SVGs out of this button. The first will be everything but the black (a doughnut, if you will):
The second will be the inverse of the black (the doughnut hole). These will become the
border-image-slice and the
background, respectively. The problem is, I don't know how to create the doughnut or the doughnut hole.
I've tried googling, and the official InkScape documentation tells you how to do this (in fact, that's where I came up with these doughnut terms; they're used in the official documentation). The problem is, every solution I find is written as though the image consists of exactly two objects/paths. But as you can see from the layers tab on my first picture, I've got many more than two.
To summarize my question, when I'm working with a complex (i.e., more than two objects/paths) image, how do I clip out a doughnut hole that cuts through all paths/objects/layers, and how do I inverse clip the doughnut?