clip-path 相关问题

如何将剪辑路径应用于 svg 元素而不是子元素

本来我有这个SVG 我想展示一个格子 alpha...

如何使用CSS为图像创建不规则形状？ [重复]

是否可以使用CSS为图像创建不规则形状，就像这个url中一样？作为一个起点，我做了这个，但我没有设法让图像的每一侧出现更多的不规则现象，因为......

仅 HTML 和 CSS 遮罩叠加，可能吗？

如何在图像或其他 HTML 元素上创建纯 CSS 叠加层？ 像这样的东西： 到目前为止发现的所有示例都建议分配背景并混合使用蒙版或剪辑路径...

自定义圆形CSS

我正在尝试使用 CSS 绘制带有圆角的自定义形状。下面是我到目前为止所拥有的图像，但正如您所看到的，圆角并没有完全起作用。 尝试定制形状 ...

围绕四分之一圆剪切路径文本 (CSS)

我想使用 CSS Clip-path 和 shape-outside 属性在 div 左上角实现围绕四分之一圆的文本环绕效果。 目前，我的代码成功剪辑了半圈...

Clip-path，如何创建圆形进度条？

我见过很多创建圆形进度条的解决方案。它们似乎都非常长且令人费解。我想创建一个非常简单的，只需在

通过剪辑路径圆形过渡/动画让叠加 div 变得可见

我有两个填满了整个页面。第一个 div（蓝色）最初显示，第二个 div（黄色）隐藏（显示：无）。如果我点击蓝色 div，我想显示黄色 我有两个<div>填满了整个页面。第一个 div（蓝色）最初显示，第二个 div（黄色）隐藏 (display:none)。如果我单击蓝色 div，我想显示黄色叠加 div。然后，如果我点击黄色 div，我希望它消失。 到目前为止，如果我只是使用 jQuery 在 display:block 和 display:none 之间切换，就可以了。然后我就可以在两个 div 之间切换了。 如何为从 display:none 切换到 display:block 时的情况添加过渡效果（在最好的情况下，反之亦然）？ 我想要一个开/关圆圈！ 我不知道这在纯 CSS 加 JavaScript 加 jQuery 中是否可行。如果可以的话，我猜可能会围绕clip-path和transition展开？ 如果可能的话，我想避免仅仅为了这个动画效果而使用繁重的第三方库。 请看我的草图： 非常感谢您的建议！ 您可以为 clip-path 属性设置动画。您只需确保在两种情况下都使用 circle （或者至少对于两种状态都使用相同的）。我使用 75vmax 作为最终的圆圈大小，但这只是目测。为了 100% 确定整个屏幕被覆盖，您可能应该根据您的屏幕尺寸或您希望圆圈覆盖的区域进行计算。您可以轻松找到在线的数学计算。 let card = document.querySelector('.card'); card.addEventListener('click', e => card.classList.toggle('card--overlay')); .card { position: relative; width: 100vw; height: 100vh; background-color: blue; } .card.card--overlay .overlay { clip-path: circle(75vmax at 50% 50%); } .overlay { position: absolute; inset: 0; background-color: yellow; clip-path: circle(0% at 25% 75%); transition: clip-path 1s ease; } <div class="card"> <div class="overlay"></div> </div>

网格布局和剪辑路径帮助（中间图像消失）

我目前正在探索剪辑路径。我在网格布局和消失的图像方面遇到了一些麻烦。 我在名为 .gallery 的 div 中有三个图像。我希望他们： 并排显示...

SVG 元素不会使用 ClipPath 和 path 在另一个 SVG 元素的空间内渲染

我正在尝试使用路径和clipPath属性使SVG元素在另一个给定的SVG元素中渲染。 具体来说，我正在尝试将角色的瞳孔渲染在玩家的眼睛中......

剪辑路径高度/objectBoundingBox 在 Firefox 中不起作用

我的网站有一个效果，它使用波浪形式的剪辑路径，如下所示： 我的网站有一个效果，它使用波浪形式的剪辑路径，如下所示： <svg class="svg" width="0" height="0" preserveAspectRatio="xMidYMid meet"> <clipPath id="my-clip-path" clipPathUnits="objectBoundingBox"> <path d="M1,0 h-0.001 c-0.02,0.006,-0.03,0.079,-0.04,0.15 c-0.011,0.075,-0.021,0.147,-0.041,0.147 s-0.031,-0.071,-0.041,-0.147 c-0.01,-0.074,-0.021,-0.15,-0.042,-0.15 s-0.032,0.076,-0.042,0.15 c-0.011,0.075,-0.021,0.147,-0.041,0.147 s-0.031,-0.071,-0.041,-0.147 c-0.01,-0.074,-0.021,-0.15,-0.042,-0.15 s-0.032,0.076,-0.042,0.15 c-0.011,0.075,-0.021,0.147,-0.041,0.147 s-0.031,-0.071,-0.041,-0.147 c-0.01,-0.074,-0.021,-0.15,-0.042,-0.15 s-0.032,0.076,-0.042,0.15 c-0.011,0.075,-0.021,0.147,-0.041,0.147 s-0.031,-0.071,-0.041,-0.147 c-0.01,-0.074,-0.021,-0.15,-0.042,-0.15 s-0.032,0.076,-0.042,0.15 c-0.011,0.075,-0.021,0.147,-0.041,0.147 s-0.031,-0.071,-0.041,-0.147 c-0.01,-0.074,-0.021,-0.15,-0.042,-0.15 s-0.032,0.076,-0.042,0.15 c-0.011,0.075,-0.021,0.147,-0.041,0.147 s-0.031,-0.071,-0.041,-0.147 C0.032,0.076,0.021,0,0,0 v1 h1 V0"> </path></clipPath> </svg> CSS .clipped { width: 100vw; height: 6vw; -webkit-clip-path: url(#my-clip-path); clip-path: url(#my-clip-path); margin: 0 auto -2px auto; } 这在所有浏览器上都能完美运行，但在 Firefox 上高度是错误的，可以在我的 codepen 中看到 https://codepen.io/shereewalker/pen/KKYvKRJ 我尝试过调整视图框和高度，但没有任何效果。 如果我通过在实际图形中重复波浪并调整 CSS 中的长度来使实际 SVG 的长度增加两倍，那么它可以工作，但在平板电脑上的纵向和横向之间切换时，它会导致问题。 我尝试将其放入 1px x 1px 插画文件中并重新导出（按照另一篇文章中的建议），以便所有数字都在 0 和 1 之间，但是当我放入新坐标时，一条蓝线就出现了似乎，虽然也许我做错了。 当我像这样包含剪辑路径时： .clipped { width: 100vw; height: 6vw; clip-path: path( "M1917.9,0h-2.6c-37.6.6-57.5,8-76.7,15.2-20.3,7.6-39.4,14.8-78.8,14.8s-58.5-7.2-78.8-14.8c-19.7-7.5-40.4-15.2-81-15.2s-61.3,7.7-81.2,15.2c-20.3,7.6-39.4,14.8-78.8,14.8s-58.5-7.2-78.8-14.8c-19.9-7.5-40.6-15.2-81.2-15.2s-61.3,7.7-81.2,15.2c-20.3,7.6-39.4,14.8-78.8,14.8s-58.5-7.2-78.8-14.8c-19.9-7.5-40.6-15.2-81.2-15.2s-61.3,7.7-81.2,15.2c-20.3,7.6-39.4,14.8-78.8,14.8s-58.5-7.2-78.8-14.8c-19.9-7.5-40.6-15.2-81.2-15.2s-61.3,7.7-81.2,15.2c-20.3,7.6-39.4,14.8-78.8,14.8s-58.5-7.2-78.8-14.8c-19.9-7.5-40.6-15.2-81.2-15.2s-61.3,7.7-81.2,15.2c-20.3,7.6-39.4,14.8-78.8,14.8s-58.5-7.2-78.8-14.8C61.3,7.7,40.6,0,0,0v101h1917.9V0Z" ); margin: 0 auto -2px auto; } 它适用于所有浏览器，但它不跨越屏幕的整个宽度，我似乎无法使用 CSS 修复。 我尝试了 userSpaceOnUse 而不是 objectBoundingBox 但没有任何效果。 如有任何帮助，我们将不胜感激 剪辑路径很烦人。在 CSS 中定义时，它们并不那么灵活。它们不会缩放，因此需要具有精确的尺寸。 我建议您使用 SVG 图像（整个图像，而不是遮罩或剪辑路径）作为 CSS mask-image（可以是像这里这样的数据 URI 或对 SVG 文件的引用）。 CSS 掩码具有不同的 CSS 属性，例如掩码大小、掩码位置、掩码重复等，可用于设置 HTML 元素的正确掩码。 body { display: flex; } .masked { width: 200px; height: 200px; mask-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIG1lZXQiPgo8cGF0aCBkPSJNIDEgMCBoIDAgYyAtMC4wMiAwLjAwNiAtMC4wMyAwLjA3OSAtMC4wNCAwLjE1IGMgLTAuMDExIDAuMDc1IC0wLjAyMSAwLjE0NyAtMC4wNDEgMC4xNDcgcyAtMC4wMzEgLTAuMDcxIC0wLjA0MSAtMC4xNDcgYyAtMC4wMSAtMC4wNzQgLTAuMDIxIC0wLjE1IC0wLjA0MiAtMC4xNSBzIC0wLjAzMiAwLjA3NiAtMC4wNDIgMC4xNSBjIC0wLjAxMSAwLjA3NSAtMC4wMjEgMC4xNDcgLTAuMDQxIDAuMTQ3IHMgLTAuMDMxIC0wLjA3MSAtMC4wNDEgLTAuMTQ3IGMgLTAuMDEgLTAuMDc0IC0wLjAyMSAtMC4xNSAtMC4wNDIgLTAuMTUgcyAtMC4wMzIgMC4wNzYgLTAuMDQyIDAuMTUgYyAtMC4wMTEgMC4wNzUgLTAuMDIxIDAuMTQ3IC0wLjA0MSAwLjE0NyBzIC0wLjAzMSAtMC4wNzEgLTAuMDQxIC0wLjE0NyBjIC0wLjAxIC0wLjA3NCAtMC4wMjEgLTAuMTUgLTAuMDQyIC0wLjE1IHMgLTAuMDMyIDAuMDc2IC0wLjA0MiAwLjE1IGMgLTAuMDExIDAuMDc1IC0wLjAyMSAwLjE0NyAtMC4wNDEgMC4xNDcgcyAtMC4wMzEgLTAuMDcxIC0wLjA0MSAtMC4xNDcgYyAtMC4wMSAtMC4wNzQgLTAuMDIxIC0wLjE1IC0wLjA0MiAtMC4xNSBzIC0wLjAzMiAwLjA3NiAtMC4wNDIgMC4xNSBjIC0wLjAxMSAwLjA3NSAtMC4wMjEgMC4xNDcgLTAuMDQxIDAuMTQ3IHMgLTAuMDMxIC0wLjA3MSAtMC4wNDEgLTAuMTQ3IGMgLTAuMDEgLTAuMDc0IC0wLjAyMSAtMC4xNSAtMC4wNDIgLTAuMTUgcyAtMC4wMzIgMC4wNzYgLTAuMDQyIDAuMTUgYyAtMC4wMTEgMC4wNzUgLTAuMDIxIDAuMTQ3IC0wLjA0MSAwLjE0NyBzIC0wLjAzMSAtMC4wNzEgLTAuMDQxIC0wLjE0NyBDIDAuMDMyIDAuMDc2IDAuMDIxIDAgMCAwIHYgMSBoIDEgViAwIi8+Cjwvc3ZnPgo='); } .t1 { background-color: orange; mask-size: 100%; mask-repeat: no-repeat; } .t2 { background-color: tomato; mask-size: 20%; mask-repeat: repeat-x; mask-position: bottom; } .t3 { background-color: lime; mask-size: 50%; mask-repeat: repeat-x; mask-position: center; } <div class="masked t1"></div> <div class="masked t2"></div> <div class="masked t3"></div> SVG 文档 <?xml version="1.0" encoding="UTF-8"?> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1" preserveAspectRatio="xMidYMid meet"> <path d="M 1 0 h 0 c -0.02 0.006 -0.03 0.079 -0.04 0.15 c -0.011 0.075 -0.021 0.147 -0.041 0.147 s -0.031 -0.071 -0.041 -0.147 c -0.01 -0.074 -0.021 -0.15 -0.042 -0.15 s -0.032 0.076 -0.042 0.15 c -0.011 0.075 -0.021 0.147 -0.041 0.147 s -0.031 -0.071 -0.041 -0.147 c -0.01 -0.074 -0.021 -0.15 -0.042 -0.15 s -0.032 0.076 -0.042 0.15 c -0.011 0.075 -0.021 0.147 -0.041 0.147 s -0.031 -0.071 -0.041 -0.147 c -0.01 -0.074 -0.021 -0.15 -0.042 -0.15 s -0.032 0.076 -0.042 0.15 c -0.011 0.075 -0.021 0.147 -0.041 0.147 s -0.031 -0.071 -0.041 -0.147 c -0.01 -0.074 -0.021 -0.15 -0.042 -0.15 s -0.032 0.076 -0.042 0.15 c -0.011 0.075 -0.021 0.147 -0.041 0.147 s -0.031 -0.071 -0.041 -0.147 c -0.01 -0.074 -0.021 -0.15 -0.042 -0.15 s -0.032 0.076 -0.042 0.15 c -0.011 0.075 -0.021 0.147 -0.041 0.147 s -0.031 -0.071 -0.041 -0.147 C 0.032 0.076 0.021 0 0 0 v 1 h 1 V 0"/> </svg>

使用clipPath可以改变SVG路径的大小

我遇到了一个问题，当我对其应用 ClipPath 时，我的 SVG 会缩小。尽管将clipPathUnits设置为userSpaceOnUse以确保剪辑路径坐标与SVG的viewB对齐...

Javascript 运行时剪辑路径更改

我能够在运行时更改元素的clipPath属性。 但我无法使用计时器中递增的变量来更改属性值。 如何将x的值分配给这两个

带有剪辑路径的自定义形状

div { 位置：固定； 底部：0； 背景颜色：绿色； 高度：50vh； 宽度：100vw； } 可以用clip-path和svg来做这种形状吗？ ...

使用通过剪辑路径创建的边框时获得圆角

我正在尝试创建以下形状（https://i.stack.imgur.com/cZmav.png 现在我正在使用剪辑路径来创建边框，因为右下角有角。然而我有一个

如何从顶部Flutter底部导航栏制作弧形

我想在 Flutter 中制作这个弯曲的底部导航栏 但我得到的是这个 我正在使用 ClipRRect 来执行此操作，但这不是我需要的，这是我的代码 底部导航栏：容器（...

带有剪辑路径的三角形 ||过度“剪辑”的背景？

我已经在 SVG 和剪辑路径上苦苦挣扎了一段时间。 我正在尝试创建一个三角形剪辑路径，该路径将覆盖照片以赋予顶部“三角形”边缘。 我正在努力实现

如何使用剪辑路径删除剪辑的 DIV 之间不需要的间隙？

我正在尝试构建一种环形形式的选择菜单。 为此，我使用 CSS 剪辑路径。 到目前为止，切割各个零件是有效的，通过旋转排列各个部分也是如此。 然而...

将 SVG 路径转换为 CSS 剪辑路径多边形的算法

我正在尝试使用 SVG 作为剪辑路径。 我知道你可以将 url 传递给 SVG 路径，但我遇到了问题，特别是在考虑绝对路径与相对路径时（据我所知......

缩放剪辑到 svg 路径的视频

我仍然是 html 和 css 的初学者，但我正在尝试创建类似于 Apple Vision Pro 的 Memories 视频播放器的效果。 Apple Vision Pro 的 3d 空间记忆视频播放器边缘模糊

使用 CSV 剪辑/遮罩（删除）图像右上角

有没有一种（跨浏览器（无 IE））方法可以用这个 svg 剪切动态大小的图像的右上角？在最坏的情况下，我可以使用固定的宽高比，但我更喜欢它灵活......