How can I get one SVG path/fill to only be drawn "inside" another, complex SVG path?

Question

I have a bottle shape in SVG that has a decorative swirl and a few other lines crossing the interior such that I'm not sure what counts as "inside" and "outside" the path. I want to put a wave shape "inside" the bottle, but I'm not getting any positive results experimenting with and am not sure if the interior lines in the bottle are working against me.

What I currently have, where the wave shape lies on top of the bottle:

  * {
    margin: 0;
    box-sizing: border-box;
  }
  .container {
    height: 100dvh;
  }
  svg {
    display: block;
    padding-block: 5%;
  }

Surrounding the bottle path with a tag just results in the wave shape alone appearing:

  * {
    margin: 0;
    box-sizing: border-box;
  }
  .container {
    height: 100dvh;
  }
  svg {
    display: block;
    padding-block: 5%;
  }

Surrounding the wave path with just displays the bottle:

  * {
    margin: 0;
    box-sizing: border-box;
  }
  .container {
    height: 100dvh;
  }
  svg {
    display: block;
    padding-block: 5%;
  }

This is the bottle path loaded in a browser SVG editor: https://yqnn.github.io/svg-path-editor/#P=M89.6174_72.5661C78.3761_70.8794_34.9222_93.2227_19_135.503M89.6174_72.5661V2H125M89.6174_72.5661H125M19_135.503C-0.902714_188.355_-0.0185633_201.762_9.29124_288.909C17.1881_362.829_33.8318_424.189_44.8889_432.248C60.9111_443.925_84_454.607_125_454.607M19_135.503C130.2_168.307_155_202.255_125_251.842M160.383_72.5661C171.624_70.8794_215.078_93.2227_231_135.503M160.383_72.5661V2H125M160.383_72.5661H125M231_135.503C250.903_188.355_250.019_201.762_240.709_288.909C232.812_362.829_216.168_424.189_205.111_432.248C189.089_443.925_166_454.607_125_454.607M231_135.503C119.8_168.307_95_202.255_125_251.842

ccprog · Accepted Answer

A lot of things need to be done to make your code work. But first, a bit of cleanup:

version="1.1", style="enable-background:new 0 0 136 195;" and xml:space="preserve" have absolutely no effect. Just delete them.
xmlns="http://www.w3.org/2000/svg" and xmlns:xlink="http://www.w3.org/1999/xlink" are not needed if you write SVG code inline inside a HTML page. But note that if you leave out the xmlns:xlink attribute, all occurences of xlink:href have also to be shortened to href.
You want to draw the lines representing the bottle in front of the blue area representing the content. Therefor, it needs to be further down in the source code.

Lets look at an interim result, leaving off the clip path:

* {
    margin: 0;
    box-sizing: border-box;
  }
  .container {
    height: 100dvh;
  }
  svg {
    display: block;
    padding-block: 5%;
  }

Now the most important part: a clip-path expresses a relationship between two entities: a grafical element, in your case a element, is clipped to an area expressed as a geometrical form, here just another element. Wrapping one element with a does exactly nothing, as the relation to the other element is missing.

The general pattern looks like this

The relationship "the grafic is clipped by the form" is expressed with the attribute clip-path="url(#clip)". Everything written inside the element is not rendered. It is only interpreted as the source of the clipping.

In your case, things get complicated by the application of a clip path to a element. The reasoning how attributes viewBox and clip-path interact and why results look like they do is very subtle and not easy to understand. Most of the time, it is just easier to wrap the with a element, and apply the clip path to that.

If you want to have a path used both as the form to use as a clipping source, and drawn as a grafic, it needs to appear in two places in your code. Fortunately, you can easily reuse content with a element. The general pattern looks like this:

But before you do that, think about your grafic, and how it was represented in the browser editor. The areas shown on grey are what will be interpreted as "inside", everything else is "outside". This is clearly not what you meant. In your case, the reason lies in the somewhat chaotic structure of the path, which is actually composed of nine (!) independent subpaths, each of which have their own insides/outsides.

Cleaning up that code is a task that the website SvgPathEditor is not really suited for. You need a full-featured vector grafic editor like Illustrator or Inkscape to effectivly do that. What exactly needs to be done is too complex for a short description here, I just present you with the result. You need to have one form that represents the outer form, and a separate one for everything shown in the interior of that form. Only the first is used for the clipping:

* {
    margin: 0;
    box-sizing: border-box;
  }
  .container {
    height: 100dvh;
  }
  svg {
    display: block;
    padding-block: 5%;
  }

How can I get one SVG path/fill to only be drawn "inside" another, complex SVG path?

Answers (2)

Related Questions

How can I get one SVG path/fill to only be drawn &quot;inside&quot; another, complex SVG path?

Answers (2)

Related Questions

How can I get one SVG path/fill to only be drawn "inside" another, complex SVG path?