如何将 css clip rect() 转换为 clipPath？

Question

我有一些使用 CSS 剪辑的旧代码。它仍然工作得很好，但由于不推荐使用 clip，我想切换到使用 clipPath。文档听起来像是使用具有相同 top right bottom left 属性的 inset() 会起作用，但不会产生相同的结果。这是一个例子：

<img src="https://i.ibb.co/0qG5Bzp/stone-wall.jpg" style="position: absolute; height: 554px; top: 0px; left: 0px; width: 2216px; clip: rect(0px, 50px, 100px, 25px); border: 1px solid red;">

<img src="https://i.ibb.co/0qG5Bzp/stone-wall.jpg" style="position: absolute; height: 554px; top: 125px; left: 0px; width: 2216px; clip-path: inset(0px 50px 100px 25px);  border: 1px solid red;">

https://jsfiddle.net/39742zoh/

我搜索了 Google 一段时间，虽然有很多关于如何使用 clipPath 的有用信息，但没有任何关于将旧剪辑代码转换为新 clipPath 的信息属性 .

如何使用 clipPath 制作相同的剪辑？

提前致谢。

Answer 1

rect() 的“顶部”和“底部”将顶部边框视为参考，这与 inset() 不同，因为后者的“底部”将底部边框视为参考。 “左”和“右”逻辑相同

您需要执行以下操作才能获得相同的结果

<img src="https://i.ibb.co/0qG5Bzp/stone-wall.jpg" style="position: absolute; height: 554px; top: 0px; left: 0px; width: 2216px; clip: rect(0px, 50px, 100px, 25px); border: 1px solid red;">

<img src="https://i.ibb.co/0qG5Bzp/stone-wall.jpg" style="position: absolute; height: 554px; top: 125px; left: 0px; width: 2216px; clip-path: inset(0px calc(100% - 50px) calc(100% - 100px) 25px);  border: 1px solid red;">

clip: rect(top, right, bottom, left);

clip-path: inset(top calc(100% - right) calc(100% - bottom) left)

如何将 css clip rect() 转换为 clipPath？

How do I convert css clip rect() to clipPath?

css

clip

clip-path