如何缩放`clip-path:path`?

问题描述 投票:0回答:3

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

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

css svg clip-path
3个回答
11
投票

您可以使用另一个

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>


2
投票

我发现的一种方法是将剪辑路径移动到 SVG 元素并在 CSS 中引用它。这样路径就可以设置

clipPathUnits="objectBoundingBox"
,它是相对于元素的大小的。

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

还有几个问题:

  • SVG 位于 HTML 中,而不是 CSS 中。
  • SVG 元素在 HTML 中占用空间,应该隐藏它。

一个很好的解决方案是将 SVG 移动到另一个文件并引用路径,例如(源 - MDN cip-path

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

0
投票

我遇到了同样的问题,最后我只是选择了

mask
。您可以在 CSS 中使用任何 svg(即使有多个
path
),并使用
mask-size
对其进行缩放。即使没有前缀,现在的支持相当好

© www.soinside.com 2019 - 2024. All rights reserved.