简单的问题：我得到了这个clip-path mask工作，Chrome并想知道一个简单的方法来获得相同的效果Firefox。

我做了一些研究，发现它Firefox's clip-path适用于svg，但这是唯一的方法吗？在这种情况下如何动态更改mask？

HTML：

Javascript：

这是与 Chrome 一起使用的。

我一直在尝试显示图像，并且在悬停时，视频会开始替换图像，我使用 Javascript 来实现悬停功能。

我在视频标签中使用“海报”来做到这一点，如下所示：`

但是，我希望视频与图像大小相同。视频为1280*720，图片为677-611。我尝试使用剪辑路径来调整视频，但它不起作用，这是我的 CSS：

我尝试将此样式应用于 .video、#videotest 和源代码，但仍无法按预期工作。

HTML5 中的视频不可能使用剪辑路径吗？如果是这样，我该怎么做，如果不是，我怎样才能使它工作？

我再解释一下：我不希望图像调整大小，保持比例与否，我只是想切断，例如左右一些像素，所以海报中的图像大小完全相同作为替换它的视频。Clip-path 似乎与我正在寻找的内容相对应，但我无法让它工作。

谢谢。

我已经基于 db 数据创建了一个带有 d3 的 svg，效果很好。但是在放大时，已绘制的元素超出了 svg。我想创建一个剪贴路径来防止这种情况，它适用于 Chrome 和 Safari，但在 Firefox 中事情变得很奇怪：

clip-path 属性应用于 a 的子元素<g>（使用url(#[id of <clippath>])值）。当我在 Firefox 中使用 Inspector 在此级别手动应用相同的剪辑路径属性时，它似乎工作正常，但由于某种原因它没有从我的样式表中读取它。（另外，请注意，Firefox 确实识别出应用于样式表中元素的属性 - 它并没有将其划掉或其他任何东西 - 它似乎并不在意！）

我不能改用溢出属性，因为出于其他原因我需要它可见。

我的 CSS：

我的 JS：

我也试过没有<defs>，这没有任何区别。

有任何想法吗？

如果有帮助，我也会尝试设置一个小提琴。

我一直在玩 CSSclip-path属性，并让这支笔为徽标制作动画： http: //codepen.io/alexcoady/pen/PqJavW。该代码绘制了许多 div 并clip-path根据我生成的一些三角形动态地将 s 应用于它们。

这在 Chrome (43.0.2357.124 (64-bit) ) 中按预期工作。

然而，在 Safari (8.0.4 + iOS) 中，什么也没有出现。打开检查器后，我可以取消选中该clip-path属性，然后重新检查它 - 路径按预期可见。

我可以做些什么来确保 Safari 首次呈现这些路径？

谢谢。

我正在尝试对 css 剪辑路径进行最简单的测试，阅读有关该内容的主要网站，但在我的本地没有任何效果。我已经在圈子里跑了一段时间，这真令人气愤。即使从网上复制示例也根本不会提供任何结果。

我只是想...用一个圆圈剪辑一个简单的 jpg 图像。我尝试使用定义剪辑路径和-webkit-clip-path的css，它不起作用：img完全显示而没有剪辑。我尝试使用 svg 剪辑路径，但它不起作用：img 完全显示而没有剪辑。

我使用 MacO，我尝试使用最新版本的 Chrome、Safari 和 Firefox。我使用（测试）Adobe Brackets 来编辑 html 和 css 文件。

我必须做错事，我必须。但我找不到什么。你能提供任何帮助吗？谢谢！

这是仅使用 css 的示例：

这是 SVG clipPath 的示例：

我正在使用响应大小的 SVG clipPath 来掩盖具有图像背景的固定位置 div。这一切都运行良好（Firefox、Chrome、IE 和 Opera），直到有人向我指出它在 Safari 中失败。几个小时后，我意识到 Safari 只是将 SVGclipPath应用于它应该应用的三个 div 之一。我在 Bing 上搜索了一下，发现这个问题本质上是一样的，但没有答案；只是一个尝试强制 CSS 硬件加速（-webkit-transform:translateZ(1px)/ -webkit-transform:translate3d(0, 0, 0)）的评论。

我做到了，战俘！它完全适用于 Safari ......但现在在 Chrome 中看起来完全一团糟。就好像重新绘制完全不正常（我上下滚动，Chrome 中扭曲的、波涛汹涌的效果每次都不同）。

问题是 Chrome 和 Safari 都是基于 WebKit 的，所以我猜供应商前缀在这里并不能真正帮助我？

作为参考，它的外观如下（FF 截图，目前在 Safari 中看起来相同）：

下面是它在带有 CSS 硬件加速的 Chrome 中的外观：

理想情况下，我需要 a) 停止 Chrome 中可怕的重绘问题，或者 b) 为clipPathSafari 中的多个元素不工作找到替代修复。

我正在玩 SVG 并想看看是否可以将 SVG 存储在外部文件中并使用 调用它url(link)，因为在 CSS 中声明形状时 FireFox 不支持剪辑路径。

但是，链接到外部文件时，剪辑根本不起作用。

这是同一个文档中包含和引用的 SVG的小提琴。

但是当我将它包含在我的服务器上时，它就不起作用了。看到这个小提琴。

在这种情况下，我看不出url(#svgPath)和之间有什么区别。url(external.com/#svgPath)是否应该以不同的方式包含在内？

更新：我尝试将其添加为.svg文件，但它似乎不起作用。小提琴。有人可以检查.svg吗？该形状看起来应该在 Illustrator 中。

我正在尝试制作一个像这个例子一样的剪辑路径掩码：http: //html.blahlab.com/tato/ 但我遇到了以下问题：掩码位于页面的左上角，但它没有不要像示例一样“跟随”链接的 div。

我的页面是： http: //mmazza.com/

我正在使用 SVGclipPath来剪辑图像。( JSFiddle )

在 Chrome 中，动画被破坏了。仅当其他内容发生更改时（例如在 JSFiddle 中的框之间拖动分隔线时）才重新渲染剪切的图像。

clipPath有没有办法在 SVG更改时“强制”Chrome 重新渲染图像？

HTML：

CSS：

我有这个界面概念，我只是不知道它是否可能。这有点难以解释，所以我把它画出来了。

我想我知道如何完成一些行为：

• <header>位置：固定；
• <nav>位置：粘性（使用 polyfill）
• <section class="content box">--- 真的不知道

我希望有某种方法可以将剪辑路径添加到我可以定位的内容框：已修复。因此，当用户滚动内容框时，会透过剪辑路径定义的区域窥视。

研究了很多选项，并认为我在 webkit-mask-attachment 中找到了解决方案，但该属性已被删除。

欢迎任何帮助。我更喜欢必须响应式工作的纯 CSS 解决方案。

干杯，巴特！

PS。我想到了一个 javascript 解决方案，我在其中监视滚动偏移并更改<header>我设置高度和溢出的类：隐藏。但如果有 CSS 解决方案，我真的更喜欢它。

更新 1

我正在做某事。仅在我使用 position: sticky 并且没有打扰它时才在 Firefox 中工作。它在您滚动时起作用....但是如果您向下滚动并等待几秒钟，则某些东西会重新定位或重新绘制，并且红色标题会再次完全显示。

知道为什么会这样吗？

在 Firefox 上试用这支笔：http: //codepen.io/anon/pen/GJBxYw