我有一個剪切路徑，它可以剪切某種形狀。問題是它是在絕對坐標中設定的。如果我把 % 放在那里，它會壞掉。如何縮放它以使其適合畫布邊框并與畫布一起拉伸？
.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>uj5u.com熱心網友回復：
您可以使用另一個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>uj5u.com熱心網友回復：
我發現的一種方法是將剪輯路徑移動到 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 移動到另一個檔案并參考路徑，例如 (source - MDN cip-path )
clip-path: url(eye.svg#c1);
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/312330.html
上一篇：使用html2canvas和jspdf加載svg資料時出錯
下一篇：具有SVG背景的CSS網格