问题标签 [clip-path]

我正在尝试制作横幅。它工作得很好，但不是在 Firefox 中。如何在 Firefox 中实现相同的效果并将文本保留在里面？例如，使用 SVG？

例子：

我正在尝试在 mozilla 中运行 svg 剪辑路径，但它不起作用。

它完美地在铬中工作。谁能帮助我使用 Mozilla 和其他浏览器？

我正在尝试制作散点图。缩放似乎有效，但从轴上散开的点是我不想要的。我用谷歌搜索了一段时间，无法解决我的问题。我已经尝试过在这篇文章中发布的解决方案，但它不起作用：矩形内的 Svg 剪辑路径不起作用

请在这里找到我的代码：https ://github.com/e-kaya/scatter

我究竟做错了什么？

I am using an SVG as a mask for an image and I'm trying to resize it. I tried indicating the width & height (to 100) but it still doesn't scale. Just remains the same size.

Codepen Demo

This is the SVG code:

我有一个由 svg 中的剪辑路径剪辑的图像：

http://codepen.io/mjjwatson/pen/GopNaj

我已经安装了这支笔，每四秒钟在图像上切换一个缩放类。宽度上有一个过渡，因此我希望图像将其宽度从 42% 设置为 100%，而剪辑路径保持不变，从而创建图像缩放效果。但是，在 Chrome 中，它似乎会出现刷新故障 - 如果您调整浏览器的大小，您可以看到宽度发生变化，但没有动画效果。

我也尝试过变换缩放图像：

这会缩放图像并根据需要进行动画处理，尽管它也会缩放剪辑路径。

是否有另一种解决方案可以在保持剪辑路径到位的同时实现这种图像缩放效果，还是我应该重新考虑一下？

我目前正在使用剪辑路径中带有图像滑块的单页网站。此处示例：http: //grafomantestsite3.be/。

这是一小段代码：

滑块是使用 Concrete5 中的块生成的。因此，图像滑块的 HTML 代码是使用脚本生成的。

这似乎适用于 Chrome，但不适用于 Firefox、Opera、Internet Explorer ......

有没有简单的方法来解决这个问题？我知道 SVG 方法，但这似乎不起作用，因为您需要在 HTML 中设置背景图像？在这里这是不可能的。

任何帮助将不胜感激。

提前致谢。

编辑：

所以我尝试了 SVG 方法并将其添加到 HTML 的正文中：

然而，这似乎不起作用。我究竟做错了什么？

我有一个nav元素，在鼠标悬停时会显示我的菜单，它在 Safari 和 Chrome 上运行良好，但在 Firefox 和 IE 中却不行：

Firefox 和 IE 中的菜单始终可见，剪辑路径不起作用。如何解决？

我一直在尝试掩盖 jQuery 图像滑块。滑块包含以下结构：

在这个结构中，我想将 clip-path 属性应用于 flexslider div。在 Chrome 中，通过向属性添加 -webkit- 前缀可以正常工作，但 Firefox 和 IE 似乎不支持正常的 clip-path 属性。

我一直在网上寻找跨浏览器解决方案，但我找不到。我看到 Firefox 只支持 url 值作为剪辑路径属性，但 IE 根本不支持它。

这是这样的想法：

红色部分是图像滑块。

有人知道这个的跨浏览器解决方案吗？

谢谢！

有没有办法让悬停只应用于图像的可见部分？

虽然transfom发生了，但clip-path似乎被忽略了：

有谁知道这是为什么，以及如何防止这种情况？