how to scale `clip-path: path`?

Question

I have a clip-path, which cuts a certain shape of. The problem is that it is set in absolute coordinates. If I put % there it breaks. How to scale it so that it fits the canvas borders and is stretched together with canvas?

.canvas {
    width: 200px;
    height: 200px;
    background-color: black;
}

.clip {
    width: 100%;
    height: 100%;

    background-color: orange;
    content: "";
    clip-path: path('M 100 50 A 75 75 0 0 1 0 50 A 75 75 0 0 1 100 50 z');
 }

<div class="canvas"><div class="clip">sadf</div></div>

Answer 1

You can use another svg and add clipPathUnits="objectBoundingBox" to it

More info here

.canvas {
  width: 200px;
  height: 200px;
  background-color: black;
}

.clip {
  width: 100%;
  height: 100%;
  background-color: orange;
  clip-path: url(#path);
}

<svg height="0" width="0">
  <defs>
    <clipPath id="path"  clipPathUnits="objectBoundingBox">
      <path d="M 0,0.5
           Q 0.50,0.15 1,0.50
           Q 0.50,0.85 0,0.50">
      </path>
    </clipPath>
  </defs>
</svg>
<div class="canvas">
  <div class="clip">sadf</div>
</div>

Answer 2

One way I found is to move the clip path to an SVG element and reference it in CSS. That way the path can set clipPathUnits="objectBoundingBox", which is relative to the element's size.

.canvas {
    width: 200px;
    height: 200px;
    background-color: black;
}

.clip {
    width: 100%;
    height: 100%;

    background-color: orange;
    content: "";
    clip-path: url(#eyePath);
 }

<div class="canvas"><div class="clip">sadf</div></div>
<svg viewBox="0 0 100 100" width="100" height="100">
  <clipPath id="eyePath" clipPathUnits="objectBoundingBox">
    <path d="M 1 0.5 A .75 .75 0 0 1 0 .50 A .75 .75 0 0 1 1 0.5 z" />
  </clipPath>
</svg>

There are still a couple of issues:

• the SVG is in the HTML instead of the CSS.
• the SVG element takes space in the HTML, it should be hidden.

A nice solution to both is to move the SVG to another file and reference the path, for example (source - MDN cip-path)

clip-path: url(eye.svg#c1);