创建反向剪切路径-CSS或SVG
我正在尝试创建本质上与CSS剪切路径相反的内容.使用剪切路径时，将剪切图像或div，以便仅保留您指定的形状，并有效删除背景的其余部分. 我希望这样，如果我剪切形状，则基本上是在最上层打一个孔并去除形状，而不是背景.这可能吗?我也愿意接受SVG解决方案，但是我是SVG的新手，所以请客气:) 基本上，在下面的代码中，我有一个绝对位于红色正方形内部的蓝色正方形，并且希望能够从蓝色正方形中冲出
..
clip-path相关内容
当使用"use"按钮时，剪切路径在SVG子画面中无法正确显示.
我正在尝试从一组图标中拼凑一张精灵表.我对SVG几乎一无所知.我可以使用简单的图标，但是带有剪切路径的图标无法正确显示.据我所知，它似乎没有使用剪辑路径. 该sprite可在jsfilddle中工作，如果我自己单独加载svg并包含语句.但是如果我有另外一个无效. 我所有的测试都已在Chrome(50.0.2661.94)中完成
..
复杂的SVG剪辑路径响应
我正在尝试采用复杂的路径形状并将其作为CSS中的剪切路径蒙版应用，但是我不知道如何获取剪切蒙板来“填充"父容器. 相反，它只是被切断或不会扩展以填充可用空间. 如果我添加clipPathUnits="objectBoundingBox"，它根本不会出现.
..
如何使用voronoi多边形修改d3力布局以触发分组元素上的事件?
目标是将d3力模拟，g元素和voronoi多边形相结合，以使节点上的触发事件更容易，例如拖动，鼠标悬停，工具提示等，并可以通过在以下代码中，将clip path属性添加到g元素和clippath元素时: 为什么拖动不触发单元格? 为什么节点变得模糊并且 路径失去了边缘的样式? 如何解决此问题以拖动节点并在其上触发事件，例如鼠标悬停? var data = [ { "
..
Chrome上的剪切路径在边缘留下了一条奇怪的线
我使用剪切路径来创建蓝色搜索按钮的特定形状. 在Chrome浏览器中，您会在切口边缘看到一条奇怪的行，而在Firefox中，一切正常. 我不是第一个指出这一点的人，但是我没有找到解决方法. Chrome Firefox 剪切路径为: clip-path: polygon(0 0, 0 100%, 15px 50%); 这是什么谜?我还发现了类似的问题:
..
是否可以使用< path>创建SVG clipPath.反应灵敏?
我正在尝试使用clipmap创建具有位图图案和某种复杂形状的响应式SVG. 如果我使用而不是来创建更简单的形状，则它们可以响应，但是我还没有使用路径实现相同的形状，那么关于如何实现这一点甚至可能的任何想法?/p> 这是我拥有的代码和一个有效的演示程序.
..
如何将剪切路径应用于DIV容器
我正在尝试建立一种类似于Chris Coyier在此处进行的进度条: https://css-tricks.com/css3-progress-bars/，但我想将SVG剪切路径应用于周围的div元素. 例如，我想将SVG剪切路径应用于.rating-stars:
..
SVG ClipPath:为什么将剪切路径应用于DIV与IMAGE会有不同的结果?
我需要创建一组3个三角形，每个三角形中都有内容(图像，副本等). 我已经设置了这支笔以大致显示我要实现的目标: https://codepen .io/andystent/pen/OJyNdmB 下面是供快速参考的图像: 在此示例中，“顶部"和“左侧"三角形是应用了剪切路径并完美显示的图像. “右"三角形(带有红色背景)是应用了剪切路径的DIV，但比例错误. 它应该看
..
堆叠圆会在边界半径上产生黑条
我在这里有个令人费解的企业. 我正在构建一个用作“火炬/探照灯"的鼠标.如果发生悬停，则所有文本(内联元素，按钮，您明白了)都从通常的白色反转为黑色，正常背景是淡黄色的氛围. 我目前具有以下设置: const _$shadow = $('.b-cursor__shadow'); const _$front = $('.b-cursor__front'); const _$ba
..
如何调整SVG的ClipPath区域的大小?
我有这样的代码: .img-container { width: 300px; height: 300px; background-color: lightgreen; overflow: hidden; } .clipped-img { clip-path: url('#header-clip-svg'); }
..
反转彩色文本相关背景
我想根据文本背景来反转文本颜色，如下图所示: . 所以我尝试了以下代码，但是没有用: #warp, #text, #tri { position: absolute; top: 0; left: 0; width: 150px; height: 150px; z-index: 1; } #warp { background-color: orange; }
..
如何从图像上切出圆形部分?
我正在尝试使用SVG路径剪切图像，但图像似乎不太适合. 这是我要实现的目标: 这就是我得到的: 这是我尝试过的代码: .topbar-chat-img { width: 48px; height: 48px; object-fit: cover; clip-path: url(#topbar-img-svg); }
..
如何使剪切路径在Microsoft Edge上工作?
在为Firefox和Microsoft Edge(ME)创建裁剪的标头时，我使用了clip-path.只需将clipPath元素放在SVG元素内，然后将clip-path样式放在HTML元素内，即可在Firefox中工作.当我在ME上打开相同的代码时，它什么也没显示. html,body,header { margin:0px; height:100%; fon
..
SVG圆角三角形，带有渐变叠加和背景图像
我有以下代码，用于创建带有紫色渐变的简单圆角三角形.我正在尝试插入一个背景图片，该图片将填充渐变下面的形状，以创建与以下屏幕截图类似的效果: 我要实现的目标: 到目前为止，我的代码(未显示图片):
..
CSS下一个上一个剪辑路径动画
根据我上周发布的相关问题，我创建了使用clip-path提供下一张和上一张幻灯片的片段的自定义轮播.目前，此功能正常运行，但现在我需要在显示/隐藏幻灯片时应用一些动画. 在相关问题中，仅需要“下一张幻灯片"功能，并且提供的解决方案是剪辑“活动"幻灯片.但是，由于现在我们需要制作下一张和上一张幻灯片，因此我已将剪辑应用于下一张和上一张幻灯片.代码如下: $(document).ready
..
d3.js刷填充颜色直方图
我用 d3.js 创建了一些直方图。 我设法改变 rect 的填充颜色，具体取决于笔刷的位置。 但是我想改变 rect 里面的颜色。例如，如果画笔开始位于 rect 的中间，我想要我的 rect 有两种颜色。 目前这就是我所拥有的： 这就是我想要的： 这里的例子。我是d3的新手，我尝试理解代码。 我看到他们使用 clip-path 当他们的时候肯定会隐藏背景栏没有刷子，
..
SVG< clipPath>适合容器并使用％单位
所以我一直在尝试为一些不同颜色的文本制作动画动画，因为我使用 和 -webkit形夹路径。 .holder div包含两个相同的文本元素，一个白色，一个灰色，剪辑路径应用于后者。 问题是我需要 坐标与文本大小成正比。这是 小提琴演示 。 我试过设置 viewBox =“0 0 100 100”，它不起作用。 我也尝试过使用 clipPathUn
..
为什么svg<使用xlink：href ="＃" />引用带有剪辑路径的元素不起作用？
实现SVG sprite时，会创建 元素，并通过 元素。包含 元素然后使用 style =“display：none;” $隐藏b $ b 剪辑路径属性不会呈现，但路径会显示。这使我的路径看起来与我想要的不同。 如何使用svg 使用剪辑路径引用元素？ 我使用grunt-svg-store来创建我的
..
在div上切角，图像设置为100％的高度和宽度
这基本上是我想要实现的 - > https://jsfiddle.net/tak1pyt7 / 1 / .clip {width：500px;身高：500px; -webkit-clip-path：多边形（100％0,100％81％，82％100％，0 100％，0 0）; clip-path：多边形（100％0,100％81％，82％100％，0 100％，0 0）;} body {背景图
..
CSS：启用Webkit硬件加速在Safari中运行正常，在Chrome中混乱
我使用响应大小的SVG clipPath来遮蔽具有图像背景的固定位置div。这一切都工作正常（Firefox，Chrome，IE和Opera），直到它指出，它是在Safari失败。几个小时后，我意识到Safari只是应用SVG clipPath 到它应该的三个div之一。我在Bing上搜索，发现这个问题，这本质上是相同的事情，但没有答案;只是一个注释尝试强制CSS硬件加速（ -webkit-tra
..