我正在使用來自行內 SVG 的剪輯路徑來屏蔽網站上具有不同縱橫比的影像。遮罩應以固定角度（-15 度）隱藏右下角。
我無法實作右角始終保持一個角度，而與蒙版影像的縱橫比無關。
我當前的 SVG 看起來像這樣：
<svg height="0" width="0" viewBox="0 0 1 1" preserveAspectRatio="none">
<defs>
<clipPath id="clipRight" clipPathUnits="objectBoundingBox">
<rect x=0 y=0 width=1 height=0.5 />
<rect x=0 y=0.5 width=1 height=0.5 transform="skewX(-15)" />
</clipPath>
</defs>
</svg>
并且 css 代碼如下所示：
.img-clip-right {
clip-path: url(#clipRight);
}
剪輯路徑應如下所示
我有一種方法可以在不知道確切影像尺寸且不使用 javascript 的情況下以特定角度繪制一條線到 svg 畫布的底端？
uj5u.com熱心網友回復：
我不太明白為什么需要 SVG 和遮罩。
此代碼段僅將剪輯路徑應用于影像。
無論影像的大小或縱橫比如何，它都會在同一區域的 15 度角去除一個角，因為問題中未指定要去除的數量：
.clipped {
--x: 100px;
--tan15: 0.267949192;
--y: calc(var(--tan15) * var(--x));
clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--y)), calc(100% - var(--x)) 100%, 0 100%);
}<img class="clipped" src="https://picsum.photos/id/1015/200/300">
<img class="clipped" src="https://picsum.photos/id/1015/300/300">
<img class="clipped" src="https://picsum.photos/id/1015/300/200">uj5u.com熱心網友回復：
我喜歡將 SVG 用于剪輯路徑的想法，但也許在這種情況下，一個更簡單的解決方案可能沒問題。怎么樣的多邊形（）函式？下面是三個例子：
body {
display: flex;
}
div {
margin: 2px;
}
div:nth-child(1) {
background: CornflowerBlue;
width: 200px;
height: 200px;
clip-path: polygon(0 0, 100% 0, 100% 80%, 80% 100%, 0 100%);
}
div:nth-child(2) {
background: Peru;
width: 200px;
height: 200px;
clip-path: polygon(0 0, 100% 0, 100% 160px, 160px 100%, 0 100%);
}
div:nth-child(3) {
background: DarkSeaGreen;
width: 200px;
height: 300px;
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%);
}<div></div>
<div></div>
<div></div>uj5u.com熱心網友回復：
您可以使用數學計算每個三角形邊的長度，并使用 a<path />代替<rect />來構建一個五邊形。
但是在您的問題中，您沒有指定白色三角形的大小，即使使用相同的一組角度（在您的情況下為 15-90-75），它也可以是任何大小，并且只是縮放。如果您有任何三角形邊的特定大小，那將是一項明確確定的任務。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/402335.html
標籤：
上一篇：如何使用js更改svg屬性？
下一篇：具有清晰邊緣的SVG影像元素