How would I go about clipping or masking an element by the shape of an SVG?

Question

I have a multipath SVG that I would like to use to clip a CSS element. How would I go about making it so that the only part of the element I see is within the SVG? In other words, how would I make it so that the only grey that I see is the grey on top of the red.

.flower-container {
  padding: 5px;
  margin: 0px;
  position: absolute;
  overflow: hidden;
  top: 8%;
  left: 8%;
  fill: red;
  width: 80%;
  height: 80%;
}

.element-container > span {
    position: absolute;
    height: 200%;
    width: 200%;
    right: -50%;
    top: 50%;
    border-radius: 45% 45% 45% 45%;
    display: inline-block;
    position: absolute;
    overflow: hidden;
    background-color: rgb(155, 155, 155, 0.7);
}

<svg class="flower-container" viewbox="0 0 30 30">
  <path d="M 16.199219 7.246094 C 16.199219 9.253906 14.570312 10.882812 12.558594 10.882812 C 10.550781 10.882812 8.921875 9.253906 8.921875 7.246094 C 8.921875 5.238281 10.550781 3.609375 12.558594 3.609375 C 14.570312 3.609375 16.199219 5.238281 16.199219 7.246094 Z M 16.199219 7.246094 "/>
  <path d="M 11.269531 12.441406 C 11.269531 14.453125 9.640625 16.082031 7.632812 16.082031 C 5.625 16.082031 3.996094 14.453125 3.996094 12.441406 C 3.996094 10.433594 5.625 8.804688 7.632812 8.804688 C 9.640625 8.804688 11.269531 10.433594 11.269531 12.441406 Z M 11.269531 12.441406 "/>
  <path  d="M 21.003906 12.480469 C 21.003906 14.488281 19.375 16.117188 17.367188 16.117188 C 15.359375 16.117188 13.730469 14.488281 13.730469 12.480469 C 13.730469 10.472656 15.359375 8.84375 17.367188 8.84375 C 19.375 8.84375 21.003906 10.472656 21.003906 12.480469 Z M 21.003906 12.480469 "/>
  <path  d="M 16.273438 17.523438 C 16.273438 19.53125 14.644531 21.160156 12.636719 21.160156 C 10.625 21.160156 8.996094 19.53125 8.996094 17.523438 C 8.996094 15.511719 10.625 13.882812 12.636719 13.882812 C 14.644531 13.882812 16.273438 15.511719 16.273438 17.523438 Z M 16.273438 17.523438 "/>
  <path  d="M 16.503906 17.753906 C 16.503906 19.761719 14.875 21.390625 12.867188 21.390625 C 10.859375 21.390625 9.230469 19.761719 9.230469 17.753906 C 9.230469 15.746094 10.859375 14.117188 12.867188 14.117188 C 14.875 14.117188 16.503906 15.746094 16.503906 17.753906 Z M 16.503906 17.753906 "/>
  <path style="stroke:none;" d="M 15.769531 12.441406 C 15.769531 14.453125 14.140625 16.082031 12.132812 16.082031 C 10.125 16.082031 8.496094 14.453125 8.496094 12.441406 C 8.496094 10.433594 10.125 8.804688 12.132812 8.804688 C 14.140625 8.804688 15.769531 10.433594 15.769531 12.441406 Z M 15.769531 12.441406 "/>
</svg>

<div class="element-container">
  <span id="el-con"></span>
</div>

I've tried with clipping paths and masks but I'm not sure where I go wrong as they either make everything or the flower SVG disappear without any clipping.

clip-path:

.flower-container {
  padding: 5px;
  margin: 0px;
  position: absolute;
  overflow: hidden;
  top: 8%;
  left: 8%;
  fill: red;
  width: 80%;
  height: 80%;
}

.element-container > span {
    position: absolute;
    height: 200%;
    width: 200%;
    right: -50%;
    top: 50%;
    border-radius: 45% 45% 45% 45%;
    display: inline-block;
    overflow: hidden;
    background-color: rgb(155, 155, 155, 0.7);
    clip-path: url(#clipping-mask);
}

<svg class="flower-container" viewbox="0 0 30 30">
 <clipPath id="clipping-mask">
  <path d="M 16.199219 7.246094 C 16.199219 9.253906 14.570312 10.882812 12.558594 10.882812 C 10.550781 10.882812 8.921875 9.253906 8.921875 7.246094 C 8.921875 5.238281 10.550781 3.609375 12.558594 3.609375 C 14.570312 3.609375 16.199219 5.238281 16.199219 7.246094 Z M 16.199219 7.246094 "/>
  <path d="M 11.269531 12.441406 C 11.269531 14.453125 9.640625 16.082031 7.632812 16.082031 C 5.625 16.082031 3.996094 14.453125 3.996094 12.441406 C 3.996094 10.433594 5.625 8.804688 7.632812 8.804688 C 9.640625 8.804688 11.269531 10.433594 11.269531 12.441406 Z M 11.269531 12.441406 "/>
  <path  d="M 21.003906 12.480469 C 21.003906 14.488281 19.375 16.117188 17.367188 16.117188 C 15.359375 16.117188 13.730469 14.488281 13.730469 12.480469 C 13.730469 10.472656 15.359375 8.84375 17.367188 8.84375 C 19.375 8.84375 21.003906 10.472656 21.003906 12.480469 Z M 21.003906 12.480469 "/>
  <path  d="M 16.273438 17.523438 C 16.273438 19.53125 14.644531 21.160156 12.636719 21.160156 C 10.625 21.160156 8.996094 19.53125 8.996094 17.523438 C 8.996094 15.511719 10.625 13.882812 12.636719 13.882812 C 14.644531 13.882812 16.273438 15.511719 16.273438 17.523438 Z M 16.273438 17.523438 "/>
  <path  d="M 16.503906 17.753906 C 16.503906 19.761719 14.875 21.390625 12.867188 21.390625 C 10.859375 21.390625 9.230469 19.761719 9.230469 17.753906 C 9.230469 15.746094 10.859375 14.117188 12.867188 14.117188 C 14.875 14.117188 16.503906 15.746094 16.503906 17.753906 Z M 16.503906 17.753906 "/>
  <path style="stroke:none;" d="M 15.769531 12.441406 C 15.769531 14.453125 14.140625 16.082031 12.132812 16.082031 C 10.125 16.082031 8.496094 14.453125 8.496094 12.441406 C 8.496094 10.433594 10.125 8.804688 12.132812 8.804688 C 14.140625 8.804688 15.769531 10.433594 15.769531 12.441406 Z M 15.769531 12.441406 "/>
  </clipPath>
</svg>

<div class="element-container">
  <span id="el-con"></span>
</div>

mask:

.flower-container {
  padding: 5px;
  margin: 0px;
  position: absolute;
  overflow: hidden;
  top: 8%;
  left: 8%;
  fill: red;
  width: 80%;
  height: 80%;
}

.element-container > span {
    position: absolute;
    height: 200%;
    width: 200%;
    right: -50%;
    top: 50%;
    border-radius: 45% 45% 45% 45%;
    display: inline-block;
    overflow: hidden;
    background-color: rgb(155, 155, 155, 0.7);
    mask: url(#clipping-mask);
}

<svg class="flower-container" viewbox="0 0 30 30">
 <mask id="clipping-mask">
  <path d="M 16.199219 7.246094 C 16.199219 9.253906 14.570312 10.882812 12.558594 10.882812 C 10.550781 10.882812 8.921875 9.253906 8.921875 7.246094 C 8.921875 5.238281 10.550781 3.609375 12.558594 3.609375 C 14.570312 3.609375 16.199219 5.238281 16.199219 7.246094 Z M 16.199219 7.246094 "/>
  <path d="M 11.269531 12.441406 C 11.269531 14.453125 9.640625 16.082031 7.632812 16.082031 C 5.625 16.082031 3.996094 14.453125 3.996094 12.441406 C 3.996094 10.433594 5.625 8.804688 7.632812 8.804688 C 9.640625 8.804688 11.269531 10.433594 11.269531 12.441406 Z M 11.269531 12.441406 "/>
  <path  d="M 21.003906 12.480469 C 21.003906 14.488281 19.375 16.117188 17.367188 16.117188 C 15.359375 16.117188 13.730469 14.488281 13.730469 12.480469 C 13.730469 10.472656 15.359375 8.84375 17.367188 8.84375 C 19.375 8.84375 21.003906 10.472656 21.003906 12.480469 Z M 21.003906 12.480469 "/>
  <path  d="M 16.273438 17.523438 C 16.273438 19.53125 14.644531 21.160156 12.636719 21.160156 C 10.625 21.160156 8.996094 19.53125 8.996094 17.523438 C 8.996094 15.511719 10.625 13.882812 12.636719 13.882812 C 14.644531 13.882812 16.273438 15.511719 16.273438 17.523438 Z M 16.273438 17.523438 "/>
  <path  d="M 16.503906 17.753906 C 16.503906 19.761719 14.875 21.390625 12.867188 21.390625 C 10.859375 21.390625 9.230469 19.761719 9.230469 17.753906 C 9.230469 15.746094 10.859375 14.117188 12.867188 14.117188 C 14.875 14.117188 16.503906 15.746094 16.503906 17.753906 Z M 16.503906 17.753906 "/>
  <path style="stroke:none;" d="M 15.769531 12.441406 C 15.769531 14.453125 14.140625 16.082031 12.132812 16.082031 C 10.125 16.082031 8.496094 14.453125 8.496094 12.441406 C 8.496094 10.433594 10.125 8.804688 12.132812 8.804688 C 14.140625 8.804688 15.769531 10.433594 15.769531 12.441406 Z M 15.769531 12.441406 "/>
  </mask>
</svg>

<div class="element-container">
  <span id="el-con"></span>
</div>

Any help would be greatly appreciated! With just CSS elements, I'm able to achieve this with overflow: hidden, but obviously can't do the same for SVGs. I've similarly tried with another SVG rather than element-container, but faced similar issues. Advance apologies if there are any issues with the general question or formatting!

Edited: adjusted code blocks into snippets

Answer 1

Clipping is used with vector images like SVGs, masking is used with raster images like PNG and WEBP. Here are some working SVG clips.

But I’m not sure that clipping is going to help you, because clip-paths can’t be positioned and scaled like backgrounds can. You can make a clip-path scale (stretch) to match the size of an element it’s applied to by using clipPathUnits="objectBoundingBox", as long as all the points on your path are between 0 and 1. Otherwise, the size and position of the clip-path is determined by the actual values in the path, which would be okay for a fixed size webpage or element, but is not much use for anything responsive.

Perhaps mix-blend-mode may be more helpful for what you want to do. Can you provide more details on what your finished design needs to look like?

.d1 {
  border: 1px solid red;
  display: inline-block;
}
.clip-svg {
  clip-path: url(#myClip);
}
.s1, .s2 {
  display: inline-block;
  width: 160px;
  aspect-ratio: 1/1;
}
.s1 {
  clip-path: url(#myClip);
  background-color: maroon;
}
.s2 {
  clip-path: url(#clover);
  background-color: blue;
}

<svg width="0" height="0">
  <defs>
    <clipPath id="myClip">
      <circle cx="100" cy="100" r="40" />
      <circle cx="60" cy="60" r="40" />
    </clipPath>
    <clipPath id="clover">
      <path d="M 112.254 34.186 C 112.254 40.97 110.117 47.266 106.481 52.419 C 111.172 49.69 116.622 48.12 122.438 48.12 C 139.947 48.12 154.152 62.325 154.152 79.825 C 154.152 97.334 139.947 111.538 122.438 111.538 C 118.07 111.538 113.91 110.658 110.126 109.062 C 113.161 113.919 114.913 119.665 114.913 125.812 C 114.913 143.321 100.709 157.526 83.2 157.526 C 73.992 157.526 65.691 153.593 59.901 147.324 C 53.475 141.516 49.446 133.128 49.446 123.798 C 49.446 117.258 51.426 111.181 54.809 106.132 C 49.847 109.358 43.918 111.233 37.561 111.233 C 20.052 111.233 5.848 97.029 5.848 79.485 C 5.848 61.985 20.052 47.78 37.561 47.78 C 43.996 47.78 49.978 49.699 54.974 52.986 C 51.094 47.728 48.801 41.223 48.801 34.186 C 48.801 16.677 63.005 2.473 80.514 2.473 C 98.049 2.473 112.254 16.677 112.254 34.186 Z"></path>
    </clipPath>
  </defs>
</svg>

<div class="d1">
  <img class="clip-svg" src="https://picsum.photos/160">
</div>

<div class="d1">
  <span class="s1"></span>
</div>

<div class="d1">
  <span class="s2"></span>
</div>