问题标签 [clip-path]

clip-path我在 Chrome 中有问题。Firefox 没有问题并正确显示此 html 页面，但 chrome 不显示任何内容。

在具有背景的元素上（图像或纯色并不重要）：

我正在尝试使用 SVG 应用剪辑路径。为了实现这一点，我将 SVG 内联放入相同的元素中，如下所示：

您可以运行下面的代码片段或检查JSFiddle。您可以看到内嵌的原始 SVG 图像（黑色），底部有曲线并且反应灵敏。相反，红色矩形显示与clip-path.

我想我误解了其中一个viewBox或preserveAspectRatio属性，但在这里找不到究竟是什么错误。任何帮助，将不胜感激。

我创建了一个剪辑路径，可在页面中的多个 div 上重复使用。我使用属性 clipPathUnits="objectBoundingBox" 使其根据其位置应用于每个 div。它在 Chrome 和 Firefox 中运行良好。当我在 safari 中尝试它时，它只能基于第一个 div 工作。这意味着它第一次运行良好，而不是当我再次调用它时，boudingbox 仍然基于第一个 Div。当我给第二个 div 一个负边距直到它与第一个部分重叠然后我可以看到它时，我意识到了这一点。

这是该问题的一个示例：

http://codepen.io/appteamio/pen/WbdRgx

我做错了什么还是Safari问题。如果有任何工作。谢谢

我正在尝试使用 CSS 属性clip-path，但Invalid property value在 Chrome 中出现错误。

这是一个小演示：

注意：这与clip-path does not work with chrome上的这个问题不同，因为它专门询问如何使用 SVG（不是 CSS）应用剪辑路径

根据 Can I Use ，它应该在 chrome 中工作。

所以我一直在尝试为一些不同颜色的文本制作挥动动画，因为我正在使用<clipPath>and -webkit-clip-path。div 包含两个相互叠加的.holder元素，具有相同的文本，一个是白色的，一个是灰色的，然后clip-path应用于后者。

问题是我需要<path>坐标与文本大小成比例。这是一个小提琴演示。

• 我试过设置 a viewBox="0 0 100 100"，它不起作用。

• 我也尝试过使用clipPathUnits="objectBoundingBox"，但在这种情况下似乎不起作用，我猜是因为文本是display:inline.

现在，如果这些看起来太复杂而无法分析，并且您了解基本概念并愿意按照自己的方式去做，那就去做吧，我现在非常愿意接受建议。

另外，我试图避免使用 JavaScript 来执行此操作，但如果必须这样做，请继续，没问题 :)

这是原始代码：

HTML

该<animate>元素只是在两条路径之间交替，以产生“波浪”效果。

CSS

这是我的 css，不是很完美，请随意撕开它！

提前致谢！

我尝试编写一个小插件，以更有机的方式打开模态框，因此我决定为 clip-path 属性设置动画。

现在此代码仅适用于 chrome： http ://codepen.io/meodai/pen/GgGzYo?editors=011

看起来firefox 不支持 polygon()clip-path 属性。Safari 和移动 Safari 也确实在为此苦苦挣扎。

是否有类似的简单方法可以在 Firefox 和 Safari 以及 Mobile Safari 中进行这项工作？知道如何解决这个问题吗？

这是一个工作示例：

Chrome 目前是否支持在剪辑路径上使用多边形？

我可以开始工作（见注释掉的代码），但不是多边形。

使用多边形的剪辑路径演示

有没有人知道一种方法来创建一个响应宽度为倒锥形的 div（参见附加的代码片段），只使用 css。此外，这个 div 需要有一个重复的背景图像（模式）。

我尝试使用剪辑路径：

这在 Safari 和 Chrome 中运行良好，但在 Mozilla、Opera 或 IE 中无法运行。有没有办法为所有相关浏览器实现？

任何帮助，将不胜感激。

I'm wanting to use a clip path to expose an image behind another image.

Im using an svg circle element. The result I want is for a soft, gradient edge, instead of a hard edge supplied by the clipPath.

Is this possible? I know that I can do it with a mask, but cant seem to get it to work with clipPath.

Heres my code so far:

花了几个小时来实现以下目标，经过几个小时的故障排除和搜索，我想也许你们中的某个天才可以解决我的问题（：

正如标题所说，我想通过更改路径内部的 d 属性来为 svg 剪辑路径设置动画。设置如下所示：

并且在某些触发器（例如按下按钮）上，动画应该开始。除了许多其他绝望的尝试之外，在某种程度上起作用的是 beginElement。问题是动画本身。路径改变了它的形状，但没有任何动画。（js 和 css 动画技巧也不起作用）

我的问题：有没有办法为变形剪辑路径设置动画？

编辑：抱歉完全忘记了这一点。当我将剪辑应用于除 mapbox 地图（既不是 mapbox-gl 画布也不是地图容器 div）之外的任何东西时，它就可以工作。剪切和更改路径有效，但没有动画。有时间我会提供一个例子。

仅供参考：最终目标是动态剪辑/遮罩 mapbox gl 地图。由于地图是一个画布元素，我还尝试了一些画布剪辑，遗憾的是，当画布元素是容器 div 的子元素时，这种剪辑不起作用，mapbpx gl 默认情况下就是这种情况，并且无法更改（已经联系过）他们的开发团队）。由于 mapbox 尤其是 gl 版本相当新，因此在未来可能会有解决此问题的方法。如果有人有一个想法来剪辑整个 mapbox 地图，如果你能分享你的想法，那么不仅一个图层会很酷！

如果有人有 mapbox 的 android sdk 而不是 web 版本的解决方案，这也可以工作:)

提前谢谢了！（如有必要，我可以提供更多信息）