问题标签 [clip-path]

如何降低 div 中文本的不透明度，如下所示：

我的代码在这里。我正在创建在使用 chrome 时工作正常的形状。但在 safari 上，事情并不正常。

有人可以帮我吗？

我正在尝试用 an 剪辑路径，id="overlay-circle"但它似乎不起作用。这是我的html代码：

这是我的CSS：

我浏览了很多文章，但无法弄清楚我做错了什么。有任何想法吗？谢谢你。

我正在尝试使用 svg 剪辑路径剪辑一个 div，因为 css 规则clip-path: url(#foo)的支持很差。所以我想可能我可以将 svg 剪辑路径附加到具有 html 属性的 div 上clip-path="#foo"。就像这里的例子一样 -链接。但它不起作用。

这是我的 svg 元素和 div。

当我打开一个元素检查器时，我看到我的 div 以某种方式出现在 svg 元素之外。 http://prntscr.com/ay7kxt 而且剪辑路径不适用。

我是在做错什么，还是这种方法不适用于 div，仅适用于 , 之类的形状？

我尝试使用 SVG 剪辑路径屏蔽元素并遵循此解决方法：https ://sarasoueidan.com/blog/css-svg-clipping/

Everthing 在 Chrome 和 Firefox 中运行良好，它似乎是最好的解决方案。

但是当我将内容放在容器中以使其居中时，chrome 的遮罩出现了问题。Firefox 使内容居中，而在 chrome 中，掩码似乎粘在浏览器的左侧。

你可以看到它是小提琴： https ://jsfiddle.net/mideyahdotch/wk58Lq7h/2/

有人知道这个问题的答案吗？谢谢你的支持！

米德亚

是否可以创建一个插入的圆形剪辑路径，以便剪辑路径有效地在中心的 div 中切出一个洞，而不是只显示中心？

除了在中心切出的孔之外，所有 div 都应该显示出来，以创建如下所示的内容：

我想使用剪辑路径或类似的东西，这样我就可以在 div 后面有东西（图像和内容），并且剪辑路径将用于显示这一点。因此 div（我的 jsfiddle 中的蓝色 div）将从中心消失，使用过渡显示其背后的内容。

https://jsfiddle.net/pm4yvbxn/

我想隐藏 clipPath 元素，这样它就不会在浏览器中显示空白区域，但我仍然希望能够从其他 svg 中使用它，比如图像。

如果我把宽度 0 和高度 0 放在上面，那么 IE 也不会显示图像。

如果我把 display:none 图像不会显示在任何浏览器中。

有任何想法吗？

我正在尝试从一组图标中拼凑出一张精灵表。我对 SVG 几乎一无所知。我可以让简单的图标正常工作，但是带有剪辑路径的图标无法正确显示。据我所知，它似乎没有使用剪辑路径。

精灵在 jsfilddle 中工作，如果我自己加载 svg 并在 SVG 中包含 < use > 语句，它就可以工作。但是如果我有一个单独的 < use > 它就行不通了。

我所有的测试都在 Chrome (50.0.2661.94) 中完成

我这样使用它：

当我使用单独的语句时，它看起来像这样：

但它应该看起来像这样：

颜色差异无关紧要，它只是拍摄图像时的背景。

编辑：

我刚刚发现，如果我将整个精灵表转储到页面 HTML 中并在本地引用它而不是外部文件，它就可以工作。所以我不知道我的外部参考有什么问题。

例如

对比

这对我来说是一种后备，但我宁愿拥有一个外部 SVG 文件，而不是将其嵌入到我的 HTML 中。

编辑2：

如果使用外部链接直接将 SVG 精灵表嵌入到 HTML 中，则会正确显示图标。

任何版本的 IE 都很酷... 11+ 就足够了...

http://codepen.io/dapinitial/pen/86857208c985a895aeea87cfd40a0b2e

首先在 Chrome 中查看它是如何显示的……然后惊叹于 IE 中的矩形。

我试图在第四个/底部/最后一个示例中通过 CSS 剪辑星星。我愿意像这个例子一样更改标记：Internet Explorer and clip-path

但是......我没有运气尝试遵循堆栈溢出示例

我们如何clip-path为所有浏览器制作兼容的 css 属性SVG？