CSS clip-path不能使用path()拉伸

文章/答案/技术大牛

发布

1回答

html、css、svg、clip

我正在尝试使用具有path值的clip-path property。但是由于某些原因，裁剪并不能像使用HTML svg作为url()那样随元素缩放。有没有办法让path()的行为像url()一样(拉伸剪辑)？注意:我也尝试生成url-encoded svg并使用clip-path: url('data:image...')display: grid; widt

浏览 77提问于2021-11-04得票数 4

1回答

如何在Javascript中制作可伸缩的聊天泡泡？

javascript、html、css、html5-canvas

这里的问题是那个三角形没有保持相同的形状(它是拉伸的)。 CSS clip-path.问题是我没能用基本的形状画出这种形状。不幸的是，clip-path不能同时支持多个clip-path .

浏览 5提问于2021-10-15得票数 0

回答已采纳

1回答

可以切换或反转css动画的方向吗？

html、css、css-animations、keyframe

举个例子，假设我有一个清洗，当用户做一些事情时，我想要穿过一个容器，当他们再次做的时候，我想要反转，类似于： 0%{clip-path: circle(0% atbottom left);}} 0%{clip-path: circle(150% at bottom left);} 1000%{clip-path: circle(0

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

1回答

是否可以使用jQuery来为css剪辑路径属性设置动画效果？

javascript、jquery、css、jquery-animate、clip-path

为此，我使用css属性clip-path，它工作得很好： clip-path: inset(0px var(--clipSize) 0px 0px); 出现的唯一问题是，当窗口大小不同时，我必须动态地更改clip-path属性。目前，我正在通过基于类的css来实现这一点，因为我不确定是否可以使用jQuery。由于不同的方法(jQuery和css)，这两种效果不能同时显示- css剪辑路径效果不协调。因此，问题是:是否

浏览 17提问于2020-09-29得票数 0

回答已采纳

1回答

Div: clip-path后的Css不能正常工作

html、css

我使用div来显示气泡，使用CSS类和:after来显示气泡。 width: 10px; bottom: 0; right: -4px; clip-path

浏览 1提问于2018-05-13得票数 0

2回答

如何动画在SVG元素中定义的裁剪路径？

html、css、svg、css-animations、clip-path

我知道如何动画一个直接定义在CSS中的剪辑路径，但我不知道如何从SVG clipPath元素引用剪辑路径。我一直在尝试使用CSS来制作简单的剪辑路径动画，直到我意识到不能直接将复合路径定义为剪辑路径，所以我转向SVG的clipPath，它允许定义多个路径。但是动画不起作用，也就是说，没有平稳的过渡。@keyframes shape { 100% { clip-path: url(#shape--en

浏览 7提问于2019-10-22得票数 4

回答已采纳

0回答

CSS - Clip-path在safari上不能很好地工作

html、css、cross-browser、css-shapes

我正在开发一个带有形状的菜单，但在safari中它不能很好地工作。在safari中，它破坏了布局，我不知道为什么。如果我不使用svg标签，而只使用css剪辑路径，那么它在safari和chrome中工作得很好，但在firefox中就不行了。Css： width: 65%; background-color: red; -webkit-clip-pat

浏览 10提问于2017-06-18得票数 1

1回答

CSS剪辑/剪辑-路径等效

css

我的CSS文件中有一行：我看到clip现在贬值了，所以我尝试使用clip-path。clip-path的等价物是什么？是： clip-path: inset(0 0 0 0);

浏览 2提问于2016-05-21得票数 2

回答已采纳

2回答

css属性掩码对svg没有正常工作。

html、css、svg、clip-path、css-mask

Css属性clip-path工作正常，但mask或-webkit-mask在此中不能正常工作。所以请检查示例代码，可能是我犯了什么错误。

浏览 3提问于2020-06-16得票数 0

回答已采纳

1回答

使用CSS变量定义-webkit-后台剪辑属性在Chrome上不起作用

css、background、css-variables、vendor-prefix

众所周知，您可以使用CSS变量来简化编写需要特定于浏览器的供应商前缀的属性。(见Lea，“”)例如, --clip-path: initial ; clip-path: var(--clip-path ) ;.maximalCircle {} 设置--clip-p

浏览 1提问于2019-07-02得票数 0

回答已采纳

1回答

SVG Polligon指向CSS clip-path

html、css、svg、sass

189.25 540.15 1112.58 540.19 1112.58 995 336.47 我想使用该形状作为CSS剪辑路径与百分比，但我不知道如何转换这些点，所以它在CSS上工作。

浏览 2提问于2018-07-09得票数 0

2回答

火狐上疯狂的CSS剪辑路径错误

html、css、svg、clip-path

我正在尝试从的CSS剪辑路径，我有一个疯狂的错误。简而言之，代码在CodePen和JSFiddle上都能工作，但是它不能在我的本地/应用程序上工作。 clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 50%); clip-path: url("#clip-sha

浏览 3提问于2015-08-02得票数 2

回答已采纳

2回答

如何使SVG剪辑路径在Google中正确工作？

css、google-chrome、svg、clip-path

我使用内联SVG和CSS clip-path属性在div元素上创建斜角。我知道CSS生成的内容可以模拟斜角效果。但在我的例子中，我必须使用SVG和clip-path。

浏览 13提问于2016-08-28得票数 2

回答已采纳

2回答

CSS -如何在后台制作三角形？

css

我正在尝试在background css中创建一个三角形。我尝试使用clip-path： width: 16px; background: red;} 但是所有的tooltip都被clip-path拦截了。有什么方法可以在不使用clip-path的情况下在backgr

浏览 3提问于2019-11-29得票数 0

7回答

如何在使用CSS* clip-path时圆角*

css、clip-path

: 90px; color: white; margin-top: 10vw; clip-path: polygon(100% 0%, 100%

浏览 24提问于2015-08-02得票数 22

1回答

如何让外部链接的SVG剪辑路径在Firefox中工作

html、css、firefox、svg

我已经成功地在基于其他浏览器中的样式名称的SVG中使用了clip-path，但是当在Firefox中从外部样式表使用'clip-path‘CSS属性时，它没有任何效果。下面的代码在火狐上不起作用，但是如果你在头部的<style>标签之间加上相同的css，它就会起作用！<html lang="en"> <link rel="stylesh

浏览 0提问于2016-02-09得票数 2

2回答

截断svg文本以适合矩形

javascript、jquery、css、svg、truncate

我尝试使用css，使用下面的代码来隐藏文本，然后弹出，但似乎不起作用。white-space: normal; position: absolute;}text.setAttributeNS(null, "id", "text_trunc"); 我最好的猜测是svg创建了一个<

浏览 0提问于2013-07-09得票数 6

回答已采纳

3回答

如何在FF和IOS中使用剪辑路径多边形

javascript、css、svg、clip-path

({ 'clip-path': coordsString '-webkit-clip-path': coordsString, }); setTimeout'-webkit-c

浏览 1提问于2015-03-02得票数 8

回答已采纳

1回答

在容器中水平地“显示”文本

javascript、html、css

我尝试过使用overflow: no-wrap和overflow: hidden，但是隐藏似乎什么也没做。我想知道这在CSS中是否可行，或者我是否需要使用多个层并使用javascript在这些层上触发动画。这就是我想要的效果。在橙色div的绝对中心应该是“自动刷新”。或者这在纯CSS中是可行的吗？相关HTML (请原谅内联风格。

浏览 0提问于2019-12-23得票数 1

回答已采纳

1回答

使用纯CSS生成剪辑路径时出现问题，如图所示

html、css、user-interface、clip

50px; left: calc(50% - 25px); background-color: black;}我得到了类似下面这样的输出：如何使用剪辑路径执行此操作帮助我只使用CSS制作这个图标？

浏览 8提问于2019-11-09得票数 0

点击加载更多