问题标签 [clip-path]

我在剪辑路径中使用内联 svg 来在我的容器上实现斜角效果。下面是我现在使用的代码

我面临的问题是用于剪辑的 svg 形状是响应式的。随着我的容器尺寸的增加，svg 形状的尺寸增加，因此右下角的斜切也增加了长度。

我想要的是切割的长度保持不变，无论我的容器的尺寸如何，我的容器应用了剪辑路径属性。

在我的代码中，我根据坐标系相对指定多边形的点。我知道我们可以绝对地以像素为单位指定点，但这将使它成为一个固定大小的形状，它可能无法完美地适合大于或小于 svg 形状尺寸的容器。

我需要找出是否可以同时在多边形点中同时具有相对尺寸和绝对尺寸，以使切割尺寸保持不变，但整体多边形尺寸是响应式的。

当前的

期望的

编辑 我发布了这个问题，它之前有完全相同的问题，但那里的答案并不能完全满足我的要求。我创建了这个新线程，因为我想在我现在正在尝试的一个特定解决方案上获得更多帮助（即剪辑路径）

我一直在试图弄清楚如何使用剪辑路径从 div 中切出一个圆圈。我创建了一个有点反向工作的演示，但它并没有完全符合我的要求：http: //jsfiddle.net/5eeedebkn/2/

在使用椭圆时，我无法弄清楚如何让剪辑路径“插入”剪切区域。

所以白色的部分最终应该被剪掉，这样你就可以看到蓝色和黑色的部分。我希望切出的部分是透明的，并且必须是圆形的。

我想做图1

如图2

使用剪辑路径，可以吗？

谢谢。

我使用 SVG 元素创建了一个相当简单的形状，然后使用clip-path. 它应该使角落对我来说是圆的，但由于某种原因，只有一个角落可以完美地发挥作用。

这是形状：

这就是我将它用作clip-path

它似乎在 FireFox 中完美运行，但除了右下角之外，Chrome 中的角没有正确切割。

我正在为我的节点（在 d3.js 中）使用圆形剪辑路径，如下所示：

但在 Firefox 中，图像不会加载，因为 clipPath 元素中的 circle 元素没有继承节点的位置（即来自 g 元素）。

在 Chrome/Safari 中，一切正常，当我打开控制台并将鼠标悬停在 clipPath 元素内的圆形元素上时，它清楚地显示了正确位置的圆形（尺寸为 84x84，因为半径为 42）。

但是在 Firefox 中，我看不到任何图像，当我使用控制台将鼠标悬停在圆圈上时，我看到它位于屏幕的左上角，尺寸为 0x0。

有什么想法我在这里做错了吗？我是否必须为 firefox 提供圆圈的绝对位置，还是应该已经从它所在的 g 元素中理解？

我已经通过 rect 剪辑了一个 svg 图像，但是现在 onclick 在那个剪辑的部分上如何触发 rect 而不是图像上的 onclick 事件。

这是我的代码：

http://jsfiddle.net/dnuboz21/

巫师，

我在剪辑路径上的鼠标悬停事件遇到了一些麻烦。出于某种原因，它没有触发，我认为这是由于元素正在剪切 Dude 的图像。

我的目标是提醒悬停元素的用户 ID（示例中的 1、2 或 3 -“点”表中的第 4 个元素）。

我已将其加载到 jsfiddle 中：

https://jsfiddle.net/vk1jc8ah/4/

有人可以让它发挥作用 - 或提出另一种实现相同目标的方法吗？

HTML：

JS：

我已将其加载到 jsfiddle 中：

https://jsfiddle.net/vk1jc8ah/4/

有人可以帮忙吗？

我有一个网页，我在其中一个部分使用了剪辑路径，并在一个完全不同的部分使用了一个简单的谷歌地图。

使用剪辑路径所需的效果是：

第一部分中使用的 CSS 是：

虽然谷歌地图的 CSS 是：

现在，每当我通过 CSS 隐藏地图或简单地从文件中删除地图时，我都会得到想要的效果，但是当地图在那里时，代码的行为很奇怪，剪辑部分在每次重新加载时呈现不同。

甚至，当我切换标签并返回时，它也会改变。有点像这样：

或这个：

任何帮助，将不胜感激！

PS我什至在任何地方都没有黑色背景。CSS 已正确重置。

我无法获得 Firefox 工作的剪辑路径。据我所知，它是兼容的，虽然我不知道它为什么不工作，而且据我所知，这不是一个很常见的问题。它在铬上运行良好。有什么我想念的吗？

我目前正在一个网站上工作，遇到了三角形图案的问题。

设计师用三角形瓷砖和图案模拟了这个网站：

请注意，我必须删除大部分内容才能在此处发布，但三角形图案顶部有内容。

我已经对如何在 HTML、CSS 和可能的 JS(?) 中实现三角形进行了一些研究，并提出了三个可能的选项：

• 背景图片
• 裁剪 div 并定位它们
• 使用 svg 并定位它

背景图像的问题在于，其中一些图块稍后会在点击时发生变化并显示内容等。所以它们真的不应该出现在图片上

我已经开始剪辑和定位 div，但这需要很长时间，我开始觉得这不是最好的解决方案。大量的摆弄，我想我以后会遇到不一致的问题

我没有太多使用 svg 的经验，但我必须一个一个地绘制它们并定位它们（​​对吗？这是一个假设）。似乎不是最佳实践方法。

有没有人对我如何解决这个问题有任何意见，或者我只需要遵循上面提到的解决方案之一，因为没有更快的方法。

我真的很感激任何想法。谢谢安东