问题标签 [clip-path]

所以问题是：如何用多个svgs做一个div背景的css剪贴蒙版？

我有一个正在循环播放的视频背景。在视频的顶部，我有一个带有黑色背景的 div 作为半透明叠加层。

这个背景我想做一个 8 个不同 svgs 的蒙版剪辑，所以图标会剪掉黑色背景。

如何才能做到这一点？我尝试做一个 svg 蒙版并使用 css3 剪辑路径，但我无法弄清楚如何使用多个 svg 正确执行此操作？

更新：这是我迄今为止尝试过的：https ://jsfiddle.net/w1ft4jm1/

问题是，我需要有多个剪裁黑色背景的 svg 图标。而且，如果我将所有内容都作为 SVG 蒙版，我将遇到问题以使其响应。

你认为最好的前进方式是什么？谢谢！

我在 Safari 9.1 中看到的行为似乎是 Safari 中的一个错误，但我把它放在这里看看它是否是我的代码的问题。

我有一个网站正在根据用户操作转换 CSS Shapes 多边形剪辑路径。它在 Chrome 50 上运行良好，但在 Safari 上却不行。在 Safari 上，当另一个插件使用 jQuery 检查相关元素的 CSS 位置时，剪辑路径停止转换。

你可以在我非常小的 codepen中看到这种行为（转载如下）。在 Safari 中，您可以单击绿色三角形来查看它以动画方式填充页面。但是，当您单击红色三角形时，它无法填充页面，即使唯一的区别是我检查了它的$().css('position'). 在 Chrome 中，两个三角形都可以正常工作。

有没有办法来解决这个问题？

HTML：

CSS：

JS：

我的标记中有一张图片：

这是我的 CSS：

如果我删除该fill-box部分，它会起作用。那么，我是否以错误的方式使用它？MDN 的语法似乎是：

链接到属性：https ://developer.mozilla.org/en/docs/Web/CSS/clip-path

我没有正确使用它吗？我需要改变什么？

我有一个带有内联 svg clipPath 的 svg 对象。一切似乎都与每个现代浏览器兼容。我只是在 Safari 或 Google Chrome 等 WebKit 浏览器中遇到问题。

内联 SVG 剪切路径：

剪裁内容的 SVG 对象：

当我在 svg 对象（幻灯片）的内部元素上触发不透明的 CSS3 过渡时，clipPath 在过渡期间被忽略。

clipPath 是在“foreignObject”上定义的。此对象是剪辑内容的父对象。我不知道如何更好地描述它。

这只是我的测试 HTML 项目： http: //ogs.dev.ka-mediendesign.de/

是否有任何解决方案可以使不透明动画与剪切路径一起使用？幻灯片对象必须定义为position:static;，因为position:absolute;结果相同（clipPath 在 WebKit 浏览器中被忽略）。

我有一个英雄图像（全宽 / 70% 高度 div 与背景图像），我正在应用蒙版以使下边缘变成一个向下箭头。我使用带有百分比的 css 剪辑路径设置它，因此它可以很好地跨不同的视口大小进行缩放。

它在 Chrome 等兼容浏览器中按预期运行，但在 Firefox 中当然会失败。我正在尝试创建一个 svg 以与 Firefox 应该尊重的 url() 函数一起使用。但是已经出局了。

我知道 svg 不能使用百分比，因此尝试使用 0.0=0%、1.0=100% 和 0.XX 来处理介于两者之间的所有内容，但这似乎不起作用，或者 svg 可能没有缩放以覆盖英雄图像分区。

有没有办法将这些基于百分比的 css 多边形转换为可在 Firefox 中使用的 svg？以及让它跨不同视口缩放的任何技巧？（最好不用加JS，绝对不用jQuery）

虽然 Firefox 的缺点不会对页面产生不好的影响，但在所有浏览器上提供相同的向下滚动鼓励会很好。

I want to apply a filter on a svg clip-path.

Here is my code,

Any idea?

你好，

我有这个 SVG 文件：

我的 CSS 代码：

该元素在 Firefox 上被裁剪，但在 Chrome 上没有。这是为什么？

谢谢你。

你好，

我想知道是否可以在同一个元素上使用多个掩码，就像这样：

有了这个，我将能够只显示元素的某些相互分离的区域。

谢谢你。

你好，

我有一个为 180x250px 容器制作的 SVG 图像的剪辑路径。但是，我想为更大的容器使用相同的形状。是否可以让 SVG 扩展以便它也覆盖更大的容器？或者我是否必须制作另一个 svg 图像以适应新尺寸？

谢谢你。

从事一个项目，我必须在半透明 PNG 后面创建一个 div。所以用 div 我可以改变颜色，但 div 必须是不同的形状才能与图像（PNG）相匹配。

样本：

尝试过 HTML 画布、CSS 形状、CSS 剪辑路径，一个浏览器的解决方案在其他浏览器中不起作用，桌面视图的解决方案在移动视图上不起作用。

正在寻找一种裁剪 div 的解决方案，如附件所示，该解决方案应该适用于所有浏览器和所有设备（响应式）。

谢谢大家