clip-path

Is it possible to make a SVG clipPath with a <path> responsive?

由 我的未来我决定 提交于 2019-12-01 07:17:23
问题 I am trying to make a responsive SVG with a bitmap pattern and a sort of complex shape with clipPath. If I use a <polygon> instead of a <path> to create simpler shapes they are responsive, but I haven't achieved the same using a path, any ideas on how to achieve this or even if is possible? Here's the code I have and a working demo. <!-- Path Test--> <div class="mainContainer"> <div class="assetContainer"> <div class="asset"> <svg width="0" height="0"> <defs> <clipPath id="pathTest"> <path d=

Invert colored text related background

由 烂漫一生 提交于 2019-12-01 06:26:50
问题 I want to invert text color based on the background of the text, like in this image: . So I've tried the following code, but it didn't work: #warp, #text, #tri { position: absolute; top: 0; left: 0; width: 150px; height: 150px; z-index: 1; } #warp { background-color: orange; } #text { text-align: center; z-index: 3; } #text h1 { margin: 0; line-height: 150px; mix-blend-mode: difference; } #tri { background-color: black; clip-path: polygon(0 0, 0 100%, 99.8% 150px); -webkit-clip-path: polygon

Clip path not displaying properly in SVG sprite when using “use”

由 江枫思渺然 提交于 2019-12-01 01:25:38
I'm trying to hack together a sprite sheet from a set of icons. I know almost nothing about SVG. I can get the simple icons to work, but an icon with a clip path isn't displaying properly. From what I can tell it seems like it's not using the clip path. The sprite works in jsfilddle and it works if I just load the svg on it's own and include a < use > statement in the SVG. But if I have a separate < use > it doesn't work. All my testing has been done in Chrome (50.0.2661.94) <svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <clipPath id=

How to Apply a Clipping Path to a DIV Container

由 不打扰是莪最后的温柔 提交于 2019-11-30 20:55:49
I'm attempting to build a kind of progress bar, similar to what Chris Coyier does here: https://css-tricks.com/css3-progress-bars/ , except that I want to apply a SVG clipping path to the surrounding div element. For example, I want to apply a SVG clipping path to .rating-stars : <div class="rating-stars"> <span class="rating"></span> </div> You can see what I have so far here: http://codepen.io/rleichty/pen/GrWmRR It doesn't work in Safari for some reason, and I'm also not sure how to resize the SVG clipping path (if that's even possible). Does anyone know how I might accomplish this, or

Svg clipPath to clip a div doesn't work in Safari when i duplicate it

由 删除回忆录丶 提交于 2019-11-30 16:00:43
问题 I have created a clip path that I reuse on multiple divs in the page. I use the property clipPathUnits="objectBoundingBox" to make it apply to each div based on its position. It works great in Chrome and Firefox. When I tried it in safari it only works based on the first div. Meaning that it works well the first time than when i call it again the boudingbox is still based on the first Div. I realized this when i gave a negative margin to the second div until it overlaped with the first one

How to apply clipPath to a div with the clipPath position being relative to the div position

由 两盒软妹~` 提交于 2019-11-30 07:39:34
问题 Not sure if I've formulated the title properly, but here goes the question. I have an SVG path of a cloud-like shape which I would like to use in CSS with the clip-path property. <path d="M46.9819755,61.8637972 C42.0075109,66.8848566 35.0759468,70 27.4091794,70 C12.2715076,70 0,57.8557238 0,42.875 C0,32.9452436 5.3914988,24.2616832 13.4354963,19.534921 C14.8172134,8.52285244 24.3072531,0 35.8087666,0 C43.9305035,0 51.0492374,4.2498423 55.01819,10.6250065 C58.2376107,8.87215568 61.9363599,7

How to Apply a Clipping Path to a DIV Container

由 拈花ヽ惹草 提交于 2019-11-30 05:42:21
问题 I'm attempting to build a kind of progress bar, similar to what Chris Coyier does here: https://css-tricks.com/css3-progress-bars/, except that I want to apply a SVG clipping path to the surrounding div element. For example, I want to apply a SVG clipping path to .rating-stars : <div class="rating-stars"> <span class="rating"></span> </div> You can see what I have so far here: http://codepen.io/rleichty/pen/GrWmRR It doesn't work in Safari for some reason, and I'm also not sure how to resize

css隐藏页面元素的方法

由 余生长醉 提交于 2019-11-29 10:34:05
用css隐藏页面元素有许多种方法。 第一种方法【opacity: 0;】 opacity属性通常用于设置一个元素的透明度，从另一个角度来看，如果透明度为0，也就从视觉上隐藏了该元素。 这个属性不是为改变元素的边界框（bounding box）而设计的，元素本身依然占据它自己的位置并对网页的布局起作用，它也将响应用户交互。 第二种方法【visibility: hidden;】 第二个要说的属性是visibility。 将它的值设为hidden将隐藏我们的元素。 如同opacity属性，被隐藏的元素依然会对我们的网页布局起作用。 与opacity唯一不同的是它不会响应任何用户交互。 此外，设置了该属性之后，元素在读屏软件中会被隐藏。 另外要注意的是，如果一个元素的visibility被设置为hidden之后，却想要显示它的某个子孙元素，只要将那个子孙元素的visibility显式设置为visible即可（样式覆盖）。 第三种方法【diaplay: none;】 display属性依照词义才是真正地隐藏了元素。 将display属性设为none就能确保元素不可见并且连盒模型也不生成，使用这个属性，被隐藏的元素不占据任何空间。 不仅如此，一旦display设为none任何对该元素直接打用户交互操作都不可能生效。 此外，读屏软件也不会读到元素的内容，因为这种方式产生的效果就像元素完全不存在。

Responsive clip-path with inline SVG

由 雨燕双飞 提交于 2019-11-28 11:12:42
On an element with a background (image or solid color don't really matter): <header id="block-header"></header> I am trying to apply a clip-path using SVG. To achieve this, I am putting SVG inline into the same element like this: <header id="block-header"> … <svg width="100%" height="100%" viewBox="0 0 4000 1696" preserveAspectRatio="none"> <defs> <clipPath id="myClip"> <path d="M0 1568.18V0h4000v1568.18S3206.25 1696 2000 1696C984.37 1696 0 1568.18 0 1568.18z"/> </clipPath> </defs> </svg> … </header> You can run the code snippet below or check the JSFiddle . You can see original SVG image (in

Clip-path doesn't work in firefox [% values]

由 ╄→гoц情女王★ 提交于 2019-11-28 09:18:46
I am trying to run svg clip-path in mozilla but it doesn't work. .mask-1 { -webkit-clip-path: polygon(0% 0%, 58% 0%, 39% 81.8%, 0% 81.8%); clip-path: polygon(0% 0%, 58% 0%, 39% 81.8%, 0% 81.8%); } It works in chrome perfectly. Can anyone can help me out with mozilla and other browsers? You can use an inline SVG (as the code below shows) in Firefox, where your points are the percentage / 100. Because of the attribute clipPathUnits the mask will be responsive. <svg width="0" height="0"> <defs> <clipPath id="clip-shape" clipPathUnits="objectBoundingBox"> <polygon points="0 0, 0.58 0, 0.39 0.818,
订阅 clip-path