问题标签 [clip-path]

我按照如何使用 Apache Batik 将一个 SVG 图像叠加到另一个上的说明（以及来自其他来源的一些额外细节）进行操作？

直到现在，大部分时间事情都运行良好。但是，现在，我的每个 svg 文档（图像）都有剪辑路径。当我放置 2 个或更多图像时，只有第二个路径保存在输出中。我丢失了所有其他剪辑路径。我需要做些什么来保留每个图像的剪辑路径吗？我查看了 SVG 输出，只看到一个剪辑路径。我的代码如下所示：

然后我使用一些标准代码来显示 SVGC.SVGD。

任何见解将不胜感激。

我正在尝试制作一个 css 圆形加载器，我已经完成了大约 90% 的工作。

目前我有它，以便 .loader 类上的数据属性 data-progress 控制进度。一切正常，但是当进度为动画时，它会为动画取消遮罩，然后在动画结束后再次遮罩。我似乎无法弄清楚为什么会这样。

这是 JS bin 的链接，可以查看我到目前为止所拥有的内容，我很想听听对此的任何想法或解决方案。提前感谢您的帮助！

http://jsbin.com/sofiho/edit?html,css,js,输出

抱歉没有添加代码片段！这里是：

HTML：

SCSS：

我正在尝试获取一些文本的视频掩码，覆盖在另一个视频实例之上。我在FF中达到了预期的效果：

文本覆盖掩盖了它所覆盖的同一视频的实例。我使用以下代码来执行此操作：

在 Chrome 中，这只是将两个视频叠加在一起，没有遮罩。知道为什么或是否有解决方法吗？

我有一个基于 SVG 的图表。顶部是一个可滚动区域，用户可以在其中浏览图表，如图所示：

通过拖动左右任一选项卡，用户可以放大绘图的特定部分，如图所示：

请注意，只有图形的选定部分是蓝色的，并且具有灰色突出显示。蓝色和高光都没有改变，但使用剪切蒙版进行剪切：

和

这一切都很好，花花公子。拖动选项卡时，剪辑路径完美无缺。在这种情况下，它会随着选项卡的滑动而逐渐更改。

但我有一个重置按钮，它调用以下内容：

当它运行时，结果如下：

请注意，选项卡组会准确地回到它们应该在的位置，但剪辑路径似乎只是部分回到了其原始宽度和 x 位置。

但事实并非如此

如果我查看页面源，并将鼠标悬停在 clippathrect对象上，它会显示以下内容：

也就是说，它显示rect对象 DID 调整大小并移动到其原始位置，但无法正常显示。移动任一选项卡会立即使剪辑路径恢复正常工作，如前两个图像中所示。

为什么会这样？无论是移动右侧选项卡，还是左侧选项卡，或两者都移动，都会发生这种情况。如果选项卡仅移动一点，似乎没有太大问题，但随着选项卡进一步移动，明显的故障/错误会增加。

类似的函数对剪辑路径执行相同attr的更改，但它总是缩短路径长度。此故障似乎仅在延长长度时发生。

我对图中的许多其他元素使用相同类型的操作，并且一切正常。所有都用 jQuery 表示法（即$('#element')）引用。

我对使用 d3 或其他库不感兴趣。我只在寻找 jQuery 或纯 JS 解决方案。

编辑 1

我也试过

没有成功。变化是逐渐发生的，但仍然没有骰子——它看起来和以前一样。此剪辑问题仅在 Safari 中发生，在 FireFox 中似乎很好。没有测试过其他人。

工作解决方案（黑客）

在剪辑路径中定义时rect，我更改了 width 属性。我已将其从上面显示的内容更改为以下内容：

然后，如果我应用了这两个操作，则剪辑路径功能可以正常工作：

删除其中任何一个都会阻止它工作。我不知道为什么，但它必须是一个临时修复，直到出现更好的情况。答案仍然非常受欢迎！

我做了 aclip-path并在背景中使用 a.gif让它看起来很棒。但是，我遇到了一个问题：Firefox 和 IE 不支持clip-path. 相反，它们只是以非常丑陋的方式显示背景图像。有什么方法可以为 Firefox 和 IE 用户设置不同的背景图片？

CSS：

注意：这与以前的用户提出的问题相同（但没有解决该问题）。

当从本地主机将剪辑路径应用于我在 Chrome 上运行的网页上的图像时，它仅适用于第一个对象。剩余的图像（对象）完全消失。但是，通过jsfiddle运行时，相同的代码可以正常工作。这是CSS：

这个jsfiddle是使用我网页上使用的完全相同的代码的问题的演示。它显示了三个相同的 div，并且圆形剪辑路径适用于所有 4 个图像。我曾问过最初的提交者他的评价是什么：“这是由于浏览器错误造成的——它在某个时候在 Chrome 和 Firefox for OS X 中得到了修复。”

然而，我有最新版本的 Chrome，从我的本地主机运行时它会出现这个问题。有什么办法可以解决这个问题吗？

我有一个使用 SVG clipPath 剪辑的图像。但是，我希望图像在 clipPath 中水平和垂直居中对齐。

有没有办法做到这一点？

http://codepen.io/aguerrero/pen/LGqMVq

我正在通过 SVG 剪辑路径制作剪贴蒙版。我正在使用一个带有三个剪贴蒙版的 SVG 元素。

问题是我的 svg 得到了完整的窗口宽度和高度，因此图像也得到了完整的宽度和高度。

所以我想要的是在剪切路径内移动图像，以便我可以显示图像的实际区域

这是 Jsfiddle链接。

我不想改变图像的纵横比。如果有什么办法，请告诉我。

谢谢

几天来，我遇到了一个问题：我制作了一个 SVG 剪辑路径，我想给它添加弯角。当我在代码中添加“Curvetto”的“C”时，我只在右侧得到一个弯角。

这是我的代码：

我的剪辑路径的图像

如何让两个角都弯曲？

我目前在处理多个表面视图和剪切其中一个视图以使其显示为圆形时遇到问题。最好用图片来描述：

所以在这个视图中，我有 2 个表面视图，全屏视图显示相机的预览，然后顶部显示使用 MediaPlayer 播放文件。我已经通过以下行将顶部放在了预览之上：

现在你可以看到我试图用下面的代码把它屏蔽成一个圆圈：

但它似乎并没有完全解决。我最初认为这是我的掩码代码的问题，但事实证明，如果我删除预览表面视图，如下图所示，掩码工作正常

任何人都对为什么会发生这种情况或如何解决它有任何想法：S？

谢谢你的帮助