如何缩放`clip-path：path`？

Question

我有一个剪辑路径，可以切割某种形状。问题是它是用绝对坐标设置的。如果我把 % 放在那里，它就会崩溃。如何缩放它使其适合画布边框并与画布一起拉伸？

.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

您可以使用另一个svg并添加clipPathUnits="objectBoundingBox"到其中

更多信息 请点击此处

.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>