webkit上的clipPath不呈现

文章/答案/技术大牛

发布

1回答

css、svg、firefox、webkit

受到this article的热情，我尝试将渐变剪切路径应用于相对简单的形状(O字母转换为曲线)。它在Firefox下工作得很好，但当我在webkit下试用时，我什么也看不到。我试着修复它，我把它分成几个简单的部分，尝试用我的Amit Sheen代码，唯一让它失败的是使用我的路径而不是他的路径。如果我不使用clipPath，路径会按预期呈现，但是一旦我裁剪它，它就消失了。); border-radius:

浏览 21提问于2021-10-15得票数 3

回答已采纳

3回答

如何使用SVG clipPathUnits="objectBoundingBox“

html、css、svg、clip-path

<img width="500" style="clip-path: url(#clip);-webkit-clip-path: url(#clip);" /> 它可以工作，但我希望clipPath大小与媒体相匹配在Chrome中，我可以用CSS控制clipPath的大小，但在FF中，clipPath保持较小。在Safari中，一种资产什么也没有出现，而在另一种情况下，它似乎偏离了中心。但是我的形状太复杂了，无法手工编写，而且

浏览 3提问于2017-05-20得票数 9

1回答

SVG clipPath来裁剪外层内容

svg、clipping、masking

通常，<clipPath>元素隐藏所有超出剪辑路径的内容。为了达到相反的效果--也就是从图像中“剪掉”一些东西--我想在clipPath和clip-rule="evenodd"属性中使用两条路径。基本上，我想要"xor“剪辑路径。<clipPath clip-rule="evenodd" id="imageclippath" clipPathUnits = &

浏览 2提问于2011-01-27得票数 23

回答已采纳

1回答

WebKit CSS3转换和带有clipPath的SVG foreignObject溢出

html、css、svg、clip-path

我有一个带有内联svg clipPath的svg对象。每一件事似乎都在一定程度上兼容于每一种现代浏览器。我只是有一个问题，在WebKit浏览器，如Safari或谷歌浏览器。<polygon points="0 1, 0 0, 1 0, 1 1"> </defs>剪辑内容的SVG对象： <foreignObje

浏览 1提问于2016-05-26得票数 0

1回答

css在ie或edge上不起作用的Svg旋转动画

css、internet-explorer、animation、svg、microsoft-edge

我正在制作一个svg上的微调器的动画。不幸的是，我在使用ie或edge时遇到了麻烦。支持所有其他浏览器。正如您所看到的，不透明度动画可以工作，但旋转不起作用。是我遗漏了什么前缀，还是在ie/edge中破坏了对svg的支持？这是两个svg，第一个不工作，第二个正常。{ transform: rotate(360deg); } </style>

浏览 6提问于2016-04-19得票数 5

1回答

当位置:绝对值时，使用内联SVG裁剪错误元素的剪辑路径

css、html、svg

浏览 3提问于2013-08-14得票数 1

回答已采纳

1回答

mozilla的剪辑路径多边形不工作。

css、svg、mozilla

是否有可能在Mozilla中实现所给的风格？我在css中使用了剪辑路径，但是当我尝试在mozila上测试它时，剪辑路径不起作用。

浏览 1提问于2016-06-09得票数 1

回答已采纳

1回答

应用clipPath对图像元素进行变换的问题

html、image、graphics、svg、clipping

对于我的生活，我不明白为什么SVG不呈现以下图形： <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1636px" height="911px" viewBox="0 0 623316 34

浏览 1提问于2013-10-25得票数 3

回答已采纳

4回答

为什么在Safari中不能使用带有SVG的CSS clip-path？

javascript、html、css、svg、safari

我有一个内联svg和一个背景图片的报头。我使用css clip-path来‘剪裁’出svg动画与下面的图像。我在firefox和chrome上运行得很好，但safari根本不会应用任何裁剪/屏蔽功能。我在开始这个项目之前检查了caniuse spec，它说明了适用于chrome的相同规则和例外，我只是先测试了chrome，它是有效的，所以我继续它，认为safari也会有同样的待遇。参考笔记：<clipPath id="cross">

浏览 3提问于2017-01-26得票数 18

1回答

有什么方法可以为CSS隐藏SVG剪裁路径吗？

html、css、svg

我有一个想要剪辑的DIV元素。我能够使用-webkit-clip-path引用SVG clipPath元素并剪辑元素：<svg width="0" height="0">#tiles { width:300px; -webkit-clip-path: url(#cli

浏览 2提问于2013-07-24得票数 4

回答已采纳

2回答

jQuery/JavaScript函数无法识别"-webkit-clip-path“吗？

javascript、jquery、html、css

我正在尝试使用CSS的剪辑路径功能，我知道它在我身上工作得很好。然后，我尝试编写一些JavaScript来更改剪辑路径的开始/停止位置。cover; height: 100vh; -webkit-clip-path这是我的JS： $("#content&quo

浏览 0提问于2015-12-02得票数 1

1回答

CSS:启用Webkit硬件加速在Safari中很好，在Chrome中很混乱

css、google-chrome、safari、clip-path

我正在使用响应大小的SVG clipPath来掩蔽带有图像背景的定位div。这一切都很好(Firefox，Chrome，IE和Opera)，直到有人告诉我它在Safari上失败了。几个小时后，我意识到Safari只是将SVG clipPath应用于它应该使用的三个div中的一个。我在Bing上搜索了一下，找到了，这基本上是一样的，但是没有回答；只是一个试图强迫CSS硬件加速(-webkit-tran

浏览 2提问于2015-06-26得票数 0

回答已采纳

1回答

多个SVG标记中的clipPath

svg、cross-browser

假设您有多个SVG标记，在每个标签中使用相同的ID定义不同的剪辑路径。" r="40" /> </defs>我还做了一个。预期的行为是什么？我认为元素只能引用它自己的SVG标记中的定义，但情况似乎并非如此： Firefox17:两次使用rect剪辑路径。S

浏览 2提问于2013-04-09得票数 11

回答已采纳

3回答

可以在没有外部文件的情况下将webkit css掩码与SVG一起使用吗？

javascript、css、webkit、svg

Webkit允许使用外部SVG文件作为任何HTML元素的掩码。即：结果是：(更多信息请访问：) 有没有人知道有没有一种不需要外部SVG文件的方法？更具体地说，它可以用javascript生成的SVG来完成吗？

浏览 0提问于2010-10-28得票数 5

回答已采纳

2回答

CSS剪辑-在Safari中不使用子元素/伪元素的路径

css、svg、safari、clip-path

我有一个非常基本的SVG剪辑路径： <defs> <path d="..." /></clipPath></svg>div { clip-path: url(#

浏览 1提问于2022-03-25得票数 2

2回答

SVG剪辑-路径不工作在Safari上

css、svg、safari

我有一个简单的动画，从下到上填充一个svg，然后淡出。填充是使用clipPath完成的，同时使用带有stroke-dasharray & stroke-dashoffset的path。问题是在Safari上，clipPath似乎完全被忽略了。我看到了许多其他成功地使用了Safari中的clip-path属性的例子和问题，但在本例中并非如此。有什么特别的想法可以阻止Safari正确地呈现这个吗？链接到JSFiddle：.p

浏览 0提问于2017-06-23得票数 3

回答已采纳

2回答

基于图像的SVG多边形形状

javascript、css、svg、polygon

但我无法做到，下面是我的代码，圆的形状，如何将圆变成多边形。<style></style> <defs> <circlecx="284" cy="213" r="213" /> </clip

浏览 3提问于2014-07-03得票数 2

回答已采纳

1回答

在SVG sprite中不工作的剪辑路径

svg

(上的实例) <cl

浏览 1提问于2015-04-06得票数 4

回答已采纳

2回答

剪辑路径/web工具包掩码在SVG是独立文件时工作，但在内联时不起作用。

javascript、css、svg、clipping、css-mask

我使用下面的实现来屏蔽一个使用SVG和一些CSS的元素。:url(rhombus.svg#rhombus); } ...path id="rhombus" d="M0,0 L500,0 500,500 100,500 z" fill="#000000" />这在Chrome、Safari和Firefox上都很好但是，我希望将一些属性动画化，所以我一直试图将S

浏览 2提问于2013-11-27得票数 1

2回答

div隐藏部分上的悬停事件

html、css

我的问题是，当我将鼠标移到父html元素的顶部圆角上时，悬停角色就会激活。但它不应该是，因为它是父对象的隐藏部分。这是一个浏览器相关的bug，还是它正在按预期工作？

浏览 6提问于2017-05-15得票数 3

点击加载更多