问题标签 [clip-path]

我正在尝试在 YouTube iframe 上制作多边形剪辑路径。它目前在播放视频之前（但不是之后）可在 Chrome 和 Safari 上运行，而在 Firefox 上则完全不可用。我不知道为什么会发生这种情况，也没有找到在 YouTube iframe 上工作的剪辑路径的任何示例。

JSFiddle

我正在尝试使用 CSSclip和clip-path属性来显示单页网站布局的浮动寻呼机导航。我试图让导航根据它是在深色还是浅色背景上更改颜色。您可以在http://dannymcgee.net/redesign中查看 Firefox 中的预期结果。我还在http://dannymcgee.net/dev/clipnav-prototype/上使用更简洁、更轻量级的代码复制了导航和容器，以进行故障排除。

这是为具有不同背景颜色的每个部分构建标记的方式：

section每次背景变化时都会重复这一过程。每个section都是相对定位的。的.clipper样式如下：

剪纸器的.nav内部是position: fixed从页面顶部开始的，并且有backface-visibility: hidden.

该效果基本上与我在 Firefox 中的效果完全一样，但在 Chrome 和 IE 中存在问题。在 Chrome 中，背景图像的行为很奇怪，并且导航在第一部分之后无法交互。在 IE 中，导航根本不会出现在第一部分之后。我已经看到这个完全相同的设置在 Chrome 和 IE 中正常工作（实际上，我在一个旧的 StackOverflow 线程上找到了我无法评论的链接），所以我知道这是可能的，我只是不知道是什么他们做的不一样。如果我能找到某种 shim Javascript 或 jQuery 解决方案，我会非常满意，但这似乎是一个非常不寻常的案例场景，我什至不知道从哪里开始寻找。

不确定我是否正确地制定了标题，但问题来了。

我有一个云状形状的 SVG 路径，我想在 CSS 中使用该clip-path属性。

当我在 HTML 中添加一个 SVG 元素并<clipPath>使用该路径进行定义时，浏览器会将剪切路径定位在左上角。如果我对剪切的元素应用边距，则掩码不会链接并保持在其初始位置。

其他类似的线程声明该clipPathUnits="objectBoundingBox"属性应该添加到<clipPath>对象中，但这似乎并没有解决我的问题。我什至将路径从绝对路径转换为相对路径并像那样尝试，但得到了相同的结果。

是否可以以某种方式将剪切路径与被剪切的元素链接起来，以便在将定位应用于被剪切的元素时，剪切路径也会移动？

如果有帮助，这是相对路径：

以及一些测试 HTML/CSS。（我已将该left属性设置为，10px以便您看到发生剪裁问题）

我试图让 svg 剪辑路径与 svg 元素一起移动，但两者似乎已连接。我基本上是想制作一个鼠标可移动的剪辑，它需要全部用 javascript 实现。这是怎么回事？

https://jsfiddle.net/9n414sxs/

我有 2 张图像相互重叠。我想要实现的是使用鼠标滚动/鼠标滚轮来更改剪贴蒙版，以显示下面的图层。

CSS：

JS：

HTML：

不知何故，JSFiddle无法处理这种情况。

问题：如何使用 jQueryoffsetX为全宽设置动画？w

我使用clip-path而不是clip因为后者的属性已被弃用。

我有一个网页，我在其中使用了应用于页面 HTML 元素之一的 SVG 剪辑路径。

SVG 元素：

应用剪切路径的 HTML 元素

<div id="clipMe"> </div>

定义剪辑的 CSS

在同一页面上，我有各种元素，其中一些是相对定位的：

仅在 Safari (8.0.4) 中，只要从#clipMediv 到 clipPath（在 SVG 元素内）的链接完好无损，就不会显示这些相对定位的元素。

最新版本的 FF 和 Chrome 按预期显示。

将属性更改为非position:相对属性会按预期显示所有内容。

禁用剪切路径（通过一起删除 SVG 元素或clip-path:从 CSS 中删除属性）也会按预期显示所有内容。

JSfiddle：

同样，这只是 Safari。我花了一段时间才将其隔离为关于 SVG 剪切路径的问题，position: relative所以我猜可能还有其他类似结果的情况。

有没有人遇到过这个问题或有什么建议让那些相对定位的 s 显示？

编辑
这可能是Mac的事情。尽管它在 OSX 的 Chrome 和 Firefox 中按预期显示，但它不会在 iOS 上的任何浏览器中显示相对定位的 DIV。

有任何想法吗？

我已经定义了一个 SVG clipPath 并将它应用到我页面上的几个 DIV。它在 FF 中按预期工作/显示，但在 Chrome 和 Safari（所有最新版本）中，如果 HTML 元素位于页面的左上角，clipPath 似乎只会影响 HTML 元素。

SVG 对象

要剪切的元素的 CSS

JSFIDDLE

我相信这篇文章开始通过使用坐标系来解决这个问题，但我很快就迷失了/困惑了好几次。听起来好像是在说使用不同的测量单位和坐标，可以将 clipPath 应用于任何 HTML 元素......但我真的不确定。

我从 Illustrator 导出了我的 clipPath，所以如果需要使用不同的单位/坐标，我不知道该怎么做。

在 Chrome 和/或 Safari 中，是否有人成功地将 SVG clipPath（这是一个实际路径 - 不是多边形或椭圆）应用于位于页面左上角以外的 HTML 元素？

在实现 SVG sprite 时，<svg>会创建一个元素并通过该元素引用 svg 元素<use>。然后使用隐藏包含<svg>元素style="display: none;"

clip-Path 属性不会呈现，但路径会呈现。这使我的路径看起来与我想要的不同。

如何使用 svg<use xlink:href="#"/>引用具有剪辑路径的元素？

我使用 grunt-svg-store 创建了我的 svg sprite，但已将这个示例简化为问答格式https://css-tricks.com/svg-sprites-use-better-icon-fonts/

Codepen.io 上的实时示例

我正在使用 dygraphs 在 android 中打印范围选择器图表。我的问题是图表超出了图表 div 的末尾。这可以在下图中看到。

在 icanuse 和其他网站上，它说 android 支持 clip-path 直到 3.0。从那时起，不支持剪辑路径（我什至在 LG G3 上使用 android 5 对其进行了测试）。

我的问题：是否有任何解决方法可以防止我的图表被剪裁？或者你有一些想法，我可以测试一下？

相关链接：

https://code.google.com/p/dygraphs/issues/detail?id=200

http://dygraphs.com/tests/range-selector.html

https://github.com/danvk/dygraphs/commit/971870e5232350812bf91dc7b555332a8993efda

所以我有这个动画（悬停时触发）。--> CodePen 上的变形动画

在 Safari 中运行非常流畅，在 Chrome 中运行起来非常不和谐，但在 Firefox 中根本无法运行。

如果有人能指出我正确的方向，我将不胜感激。这甚至可以以某种方式修复吗？

代码：

HTML：

SCSS：