如何缩放`clip-path: path`?
how to scale `clip-path: path`?
我有一个剪切路径,它剪切了特定的形状。问题是它是在绝对坐标中设置的。如果我把 % 放在那里它就会坏掉。如何缩放它使其适合 canvas 边界并与 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>
我发现的一种方法是将剪辑路径移动到 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中取space,应该隐藏。
两者的一个很好的解决方案是将 SVG 移动到另一个文件并引用路径,例如 (source - MDN cip-path)
clip-path: url(eye.svg#c1);
您可以使用另一个 svg
并向其添加 clipPathUnits="objectBoundingBox"
更多信息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>
我有一个剪切路径,它剪切了特定的形状。问题是它是在绝对坐标中设置的。如果我把 % 放在那里它就会坏掉。如何缩放它使其适合 canvas 边界并与 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>
我发现的一种方法是将剪辑路径移动到 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中取space,应该隐藏。
两者的一个很好的解决方案是将 SVG 移动到另一个文件并引用路径,例如 (source - MDN cip-path)
clip-path: url(eye.svg#c1);
您可以使用另一个 svg
并向其添加 clipPathUnits="objectBoundingBox"
更多信息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>