clip-path 相关问题

这是一个简单的 SVG，带有带有剪辑路径的轮廓矩形：这是一个简单的 SVG，带有带有剪辑路径的轮廓矩形： <svg width="100" height="100" viewBox="-50 -50 100 100" xmlns="http://www.w3.org/2000/svg"> <rect x="-40" y="-40" width="80" height="80" clip-path="path("M -10 -10 l 20 0 l 0 20 l -20 0 z")" fill="lightblue" stroke="black"/> </svg> https://jsfiddle.net/6aLnuc1h/1/ 重要提示：请注意，由于 viewBox，SVG 以 0, 0 为中心（而不是让 0, 0 位于左上角）。因此，rect的左上角给出为 -40, -40。没有剪辑路径，SVG 看起来像这样：剪辑路径绘制一个 20x20 的正方形，从 -10、-10 开始。在 Firefox 中，这正如您所期望的那样工作，它会在 rect: 中间剪出一个小方块在 Chrome 中，它似乎仍然使用左上角作为剪辑的原点（而不是每个 viewBox 调整后的坐标），并且最终会在 rect 的左上角剪辑一个正方形：我无法找到有关此行为的任何文档或任何说明哪种行为是正确/预期的内容。 Firefox 确实“看起来”做得很好。我不确定 Chrome 在这里做什么——也许它假设剪辑路径的起源是它们剪辑的元素的左上角？如何定义剪辑路径以使浏览器同意？我并没有选择其中一种，但我试图避免检查用户代理来决定如何定义剪辑路径。我相信Chrome在这里是正确的，根据规格，<basic-shape>的参考框应该默认为border-box，而在Firefox中似乎默认为view-box，我认为（虽然我可能是错的），那个border-box确实会映射到这里的所有者<svg>（？）。但是稳定的 Chrome 仍然不支持在 clip-path: <basic-shape> <geometry-box> 中设置参考框，因此你不能在那里拥有 Firefox 的行为，在 Canary 中你可以： /* Using CSS as it's clearer */ rect { /* In Chrome Canary this will produce the same result as in Firefox */ clip-path: path("M -10 -10 l 20 0 l 0 20 l -20 0 z") view-box; } <svg width="100" height="100" viewBox="-50 -50 100 100" xmlns="http://www.w3.org/2000/svg"> <rect x="-40" y="-40" width="80" height="80" fill="lightblue" stroke="black"/> </svg> 非常奇怪的一件事是 Firefox 永远不会产生 Chrome 的结果，即使它们显然支持设置<geometry-box>。

svg clip-path

回答 1 投票 0

剪切路径多边形

我的CSS代码是： .myButton { 框阴影：插入 0px 1px 3px -50px #91b8b3；背景颜色：透明；边框：4px实心#566963；显示：内联块；光标：指针；颜色:

html css button clip-path

回答 1 投票 0

使用CSS中的剪辑路径为元素中心创建半圆形切割效果

如何在CSS中使用clip-path来剪切元素，使剪切发生在元素的中心，并且剪切遵循半圆形形状？我想创建一个设计，其中我有一个...

html css svg clip-path

回答 1 投票 0

如何制作对角边框（顶部和左侧）

图片说明在这里我需要制作一个这样的div。我在剪辑路径中制作了它，但问题是我必须将内容插入到从 div 屏障出来的 div （一些文本）中，如果有人有

html css border clip-path diagonal

回答 2 投票 0

如何使用 svg 或 css 创建混合直线/曲线截面边界？

对于我的应用程序，我正在创建一个具有非标准部分边界的注册页面。你可以在这里看到我想要达到的效果：这不是一个简单的弧线——它有两条直线，还有一个弧线……

html css svg css-shapes clip-path

回答 0 投票 0

如何调整SVG的ClipPath区域大小？

我有这样的代码： .img 容器 { 宽度：300px；高度：300px；背景色：浅绿色；溢出：隐藏； } .clipped-img { 剪辑路径：url（'#header-clip-svg'）; } 我有这样的代码： .img-container { width: 300px; height: 300px; background-color: lightgreen; overflow: hidden; } .clipped-img { clip-path: url('#header-clip-svg'); } <div class="img-container">  <svg height="0" width="0"> <defs> <clipPath id="header-clip-svg"> <path d="M199.6,18.9c-4.3-8.9-12.5-16.4-22.3-17.8c-11.9-1.7-23.1,5.4-32.2,13.2c-9.1,7.8-17.8,16.8-29.3,20.3c-20.5,6.2-41.7-7.4-63.1-7.5C38.7,27,24.8,33,15.2,43.3c-35.5,38.2-0.1,99.4,40.6,116.2c32.8,13.6,72.1,5.9,100.9-15c27.4-19.9,44.3-54.9,47.4-88.6c0.2-2.7,0.4-5.3,0.5-7.9C204.8,38,203.9,27.8,199.6,18.9z"></path> </clipPath> </defs> </svg>  <img class="clipped-img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3341051/team.jpg"/> </div> 我想增加裁剪形状的尺寸，使其具有彩色绿色区域的宽度。有没有办法做到这一点？您可以将 SVG 应用为 mask 并轻松调整其大小和位置（就像您可以使用 background-image 一样）。只需确保为视图框设置正确的值： .img-container { width: 300px; height: 300px; background-color: lightgreen; margin:5px; } .clipped-img { width:100%; height:100%; display:block; object-fit:cover; -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 207 167"><path d="M199.6,18.9c-4.3-8.9-12.5-16.4-22.3-17.8c-11.9-1.7-23.1,5.4-32.2,13.2c-9.1,7.8-17.8,16.8-29.3,20.3c-20.5,6.2-41.7-7.4-63.1-7.5C38.7,27,24.8,33,15.2,43.3c-35.5,38.2-0.1,99.4,40.6,116.2c32.8,13.6,72.1,5.9,100.9-15c27.4-19.9,44.3-54.9,47.4-88.6c0.2-2.7,0.4-5.3,0.5-7.9C204.8,38,203.9,27.8,199.6,18.9z"></path></svg>' ) center/contain no-repeat; mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 207 167"><path d="M199.6,18.9c-4.3-8.9-12.5-16.4-22.3-17.8c-11.9-1.7-23.1,5.4-32.2,13.2c-9.1,7.8-17.8,16.8-29.3,20.3c-20.5,6.2-41.7-7.4-63.1-7.5C38.7,27,24.8,33,15.2,43.3c-35.5,38.2-0.1,99.4,40.6,116.2c32.8,13.6,72.1,5.9,100.9-15c27.4-19.9,44.3-54.9,47.4-88.6c0.2-2.7,0.4-5.3,0.5-7.9C204.8,38,203.9,27.8,199.6,18.9z"></path></svg>' ) center/contain no-repeat; } <div class="img-container"> <img class="clipped-img" src="https://picsum.photos/id/1074/800/800"> </div> <div class="img-container" style="width:500px;"> <img class="clipped-img" src="https://picsum.photos/id/1074/800/800"> </div> <div class="img-container" style="width:150px;"> <img class="clipped-img" src="https://picsum.photos/id/1074/800/800"> </div> .img-container { width: 300px; height: 300px; background-color: lightgreen; overflow: hidden; } .clipped-img { clip-path: url('#header-clip-svg'); max-width: 100%; } <div class="img-container">  <svg height="0" width="0"> <defs> <clipPath id="header-clip-svg"> <path d="M199.6,18.9c-4.3-8.9-12.5-16.4-22.3-17.8c-11.9-1.7-23.1,5.4-32.2,13.2c-9.1,7.8-17.8,16.8-29.3,20.3c-20.5,6.2-41.7-7.4-63.1-7.5C38.7,27,24.8,33,15.2,43.3c-35.5,38.2-0.1,99.4,40.6,116.2c32.8,13.6,72.1,5.9,100.9-15c27.4-19.9,44.3-54.9,47.4-88.6c0.2-2.7,0.4-5.3,0.5-7.9C204.8,38,203.9,27.8,199.6,18.9z"></path> </clipPath> </defs> </svg>  <img class="clipped-img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3341051/team.jpg"/> </div>

css svg clip-path

回答 2 投票 0

在 safari 中，单击已设置剪辑路径的图像时不会发出 Click 事件

我想将图像拖到设置了剪辑路径的 div 中。当我在 Chrome 和 Firefox 浏览器中检查该图像元素上的元素时，该图像在检查元素中被选中但是......

safari draggable clip-path mouseclick-event

回答 0 投票 0

使用 clip-path 获取工具提示的圆形边框

有一个非常烦人的 CSS 挑战，我需要使工具提示具有线性渐变背景，并且周围有圆形边框。这是我的解决方法，但只有顶部的两个角有一个圆形......

html css tooltip linear-gradients clip-path

回答 0 投票 0

将 Border-radius 放在剪辑路径中

有没有办法在剪辑路径中放置边界半径？这是我的代码；剪辑路径：多边形（0 0、100% 0、96% 100%、5% 100%）；边框半径：93px 66px 80px 80px;