clip-path

SVG 2D入门9 - 蒙板

由 旧时模样 提交于 2020-02-16 06:38:52
SVG支持的蒙板 SVG支持多种蒙板特效，使用这些特性，我们可以做出很多很炫的效果。至于中文中把mask叫做"蒙板"还是"遮罩"就不去区分了，这里都叫做蒙板吧。 SVG支持的蒙板类型： 1. 裁剪路径(cliping path) 裁剪路径是由path, text或者基本图形组成的图形。所有在裁剪路径内的图形都可见，所有在裁剪路径外的图形都不可见。 2. 遮罩/蒙板(mask) 蒙板是一种容器，它定义了一组图形并将它们作为半透明的媒介，可以用来组合前景对象和背景。 裁剪路径和其他的蒙板一个重要的区别就是：裁剪路径是1位蒙板，也就是说裁剪路径覆盖的对象要么就是全透明(可见的，位于裁剪路径内部)，要么就是全不透明(不可见，位于裁剪路径外部)。而蒙板可以指定不同位置的透明度。 视窗的裁剪路径 - overflow和clip属性 HTML元素的overflow属性和clip属性共同设置了该元素对内容的剪裁行为。同样的，在SVG中，这2个属性还可以使用。 overflow = visible | hidden | scroll | auto | inherit overflow属性定义了当元素的内容超过元素的边框的时候采取的行为。 这个属性可以用于能创建新视窗的元素(svg,symbol,image,foreignObject),pattern和marker元素。这个属性的取值含义如下：

CSS 故障艺术

由 浪子不回头ぞ 提交于 2020-02-10 11:31:43
本文的主题是 Glitch Art，故障艺术。 什么是故障艺术？我们熟知的抖音的 LOGO 正是故障艺术其中一种表现形式。它有一种魔幻的感觉，看起来具有闪烁、震动的效果，很吸引人眼球。 故障艺术它模拟了画面信号出现故障导致成像错误的感觉。青色色块与红色色块无法重合就是这种故障的体现。从胶片时代开始到今天的数码时代，这种故障一直是观众非常熟悉的现象。即使抖音的 LOGO 只是静态的，大脑也会自己补完整个效果，甚至还会自己脑补信号干扰的噪音。 当然，广义的故障艺术不仅仅指这种效果，我觉得是很宽泛的，本文将介绍一些 CSS 能够模拟完成的故障艺术效果。 使用混合模式实现抖音 LOGO 首先从静态的开始，抖音的 LOGO 就是很好的一个例子。 它看着像是 3 个 J 形重叠在一起。而实际上，是两个 J 形重叠在一起，重叠部分表现为白色，这个特性，使用 CSS 的混合模式 mix-blend-mode 非常好实现，而单个 J 形示意图如下： 图片来源于知乎： 为什么抖音的标志，看起来具有“电”“闪烁”“震动”的感觉？ 单个 J 形其实是由 3/4圆 + 竖线 + 1/4圆组成，使用一个标签即可完成（加上两个伪元素）。 关键点 主要借助伪元素实现了整体 J 结构，借助了 mix-blend-mode 实现融合效果 利用 mix-blend-mode: lighten 混合模式实现两个 J

CSS：画扇形

由 只愿长相守 提交于 2020-02-01 04:19:32
来自： https://github.com/haizlin/fe-interview/issues/527 四个半圆叠加，过半调整 z-index < div class = " container " > < div class = " fan-1 " > </ div > < div class = " fan-2 " > </ div > < div class = " fan-3 " > </ div > < div class = " fan-4 " > </ div > </ div > .container { width : 200px ; height : 200px ; position : relative ; border-radius : 100% ; } div { width : 50% ; height : 100% ; position : absolute ; left : 0 ; top : 0 ; } .fan-1, .fan-3 { background : #CC9999 ; } .fan-2, .fan-4 { background : white ; } .fan-1, .fan-2 { border-radius : 100px 0 0 100px ; transform-origin : 100% 50% ; z-index :

Responsive SVG Clip Path or Mask Image

由 混江龙づ霸主 提交于 2020-01-25 06:47:09
问题 I am trying to get a gif with an SVG clip path applied to it (I've also tried mask image but couldn't get the desired outcome here either) to stay within the bounds of the viewport for all screen sizes. I've tried following these examples: Responsive clip-path with inline SVG; Create responsive SVG clip path / Making SVG <path> responsive; Complex SVG clip-path responsive; https://codepen.io/hesselberg/pen/aNgGwQ The dimensions/ responsiveness seems to be working but there's nothing to see

Complex SVG clip-path responsive

由 前提是你 提交于 2020-01-24 20:47:06
问题 I'm trying to take a complex path shape and apply it as a clip-path mask in css, but I can't figure out how to get the clip mask to "fill" the parent container. Rather it just gets cut off or doesn't expand to fill the available space. If I add clipPathUnits="objectBoundingBox" it doesn't appear at all. <svg viewBox="0 0 720 720"> <defs> <clipPath id="map"> <path d="M568.421 326.842L511.579 270v37.895h-18.947v-18.948h-56.843v37.895l18.948 37.894v18.948h-18.948l37.896 56.842h-37.896l-18.947-18

CSS: Enabling Webkit hardware acceleration works fine in Safari, messes up in Chrome

由 旧巷老猫 提交于 2020-01-17 05:39:06
问题 I'm using a responsively-sized SVG clipPath to mask fixed-position divs with image backgrounds. This was all working fine (Firefox, Chrome, IE & Opera) until it was pointed out to me that it was failing in Safari. After several hours, I realised that Safari was only applying the SVG clipPath to one of the three divs it was supposed to. I googled it on Bing and found this question which is essentially the same thing but with no answer; just a comment to try forcing CSS hardware acceleration (

Child Element Disappears after clip-path added

由 被刻印的时光 ゝ 提交于 2020-01-16 02:50:16
问题 For a design project I'm doing, I want to put a clip-path on my secondary content. However, after putting the clip-path code, some of the children or elements are disappearing on my .about content. I've tried using position:absolute or z-index but nothing happens on the content of my .about content. Thanks in Advance. * { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 10px; } a { text-decoration: none; } .body { height: 100vh; background: linear-gradient( #001f3f,

Transform CSS clip-path with mixed (fixed and percentage) values to SVG clip-path

由 柔情痞子 提交于 2020-01-14 09:58:27
问题 I have a card image with gradient with clipped corner using clip-path : .card { width: 200px; height: 200px; background: linear-gradient(to bottom, blue, green); clip-path: polygon(20px 0, 100% 0, 100% 100%, 0 100%, 0 20px); } <div class="card"></div> Clipped corner must have fixed size regardless of card size so I'm using pixels for clipping corner. But clip-path has not the best browser support at the moment, so I've tried converting this HTML and CSS to SVG. .container { width: 200px;

Insane CSS Clip Path Bug on Firefox

由 雨燕双飞 提交于 2020-01-14 02:46:22
问题 I'm trying out CSS Clip Path from http://www.smashingmagazine.com/2015/05/creating-responsive-shapes-with-clip-path/, and I have this insane bug. In a nutshell, the code works on both CodePen and JSFiddle, but it fails to work on my local/app. Here's the code for the polygon I was trying to come up with. First the CSS: nav { position: fixed; bottom: 0; background: #BE0F16; color: #fff; width: 100%; padding: 2rem 1rem; text-align: right; -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100%

SVG clip-path online works if CSS not linked but inline

由 点点圈 提交于 2020-01-14 02:24:25
问题 Am encountering a weird bug, well I think. I was having issues with a clip-path via a referenced SVG element not being applied when I applied a filter to the same element so I started investigating. It was not the filter causing issues. It took me a while to find this as my clip-path was a full rect that somehow worked without filter. See my post here. I found out that in Firefox the clip-path is not applied at all, even without the filter. Somehow the clip-path only works if I reference the
订阅 clip-path