码云笔记前端博客
Home > HTML/CSS > CSS3 SVG clip-path路径剪裁属性简介

CSS3 SVG clip-path路径剪裁属性简介

2019-08-28 分类:HTML/CSS 作者:码云 阅读(80)

本文共计3728个字,预计阅读时长需要10分钟。

clip-path介绍

clip-path 直译过来就是裁剪路径,使用SVG或形状定义一个HTML元素的可见区域的方法。想象一下你在Photoshop中勾勒路径的场景。MDN上是这样介绍clip-path的:

clip-path属性可以防止部分元素通过定义的剪切区域来显示,仅通过显示的特殊区域。剪切区域是被URL定义的路径代替行内或者外部svg,或者定义路线的方法例如circle().。clip-path属性代替了现在已经弃用的剪切 clip属性。

SVG中的clip-path

SVG中,有个名叫的元素,人如其名,其专门用来定义剪裁路径的。举个简单例子:

1
2
3
4
5
<defs><!-- 定义 -->
  <clipPath id="clipPath"><!-- 定义剪裁路径 -->
      <rect x="0" y="0" width="80" height="80" /><!-- 路径详细 -->
  </clipPath>
</defs>

上面的定义了一个80*80的矩形剪裁路径。OK,假设现在SVG中有个圆,SVG代码如下:

1
<circle cx="60" cy="60" r="50" fill="#34538b" />

按照我们浅显的认识,应该会出现一个填充某种颜色的圆,类似下截图效果:
CSS3 SVG clip-path路径剪裁属性简介
但是,如果此时该圆同时设置了clip-path属性,且值指向的就是上面定义的剪裁路径#clipPath呢?

1
<circle cx="60" cy="60" r="50" fill="#34538b" clip-path="url(#clipPath)" />

则,十五的圆被剪裁成了银杏叶:
CSS3 SVG clip-path路径剪裁属性简介
跟<g>, <symbol>等元素类似,<clipPath>元素里面除了rect元素, 还可以是circle, ellipse, line, polyline, polygon, ...等等,甚至是text文本。

1
2
3
4
5
6
7
8
9
10
11
<svg>
    <defs>
        <clipPath id="clipPath">
            <text x="10" y="50" style="font-size: 20px;">一步之遥</text>
        </clipPath>
    </defs>
    <g style="clip-path: url(#clipPath);">
        <circle cx="60" cy="60" r="50" fill="#34538b" />
        <rect x="0" y="0" width="60" height="90" style="fill:#cd0000;"/>
    </g>
</svg>

目前Chrome浏览器下的文字剪裁极具马赛克风格,类似下面:
CSS3 SVG clip-path路径剪裁属性简介
而其他浏览器,例如IE浏览器,则表现正常:
CSS3 SVG clip-path路径剪裁属性简介
上面列举了“矩形剪裁”和“文本剪裁”两个例子,大家有木有发现在应用clip-path属性的时候有什么差别?

啊~这位同学眼睛很尖,一眼就看出来,前者直接标签属性;后者则是style样式设置(红色高亮代码):

1
2
3
clip-path="url(#clipPath)"

style="clip-path: url(#clipPath);"

CSS中的clip-path

1. clip-path与clip

CSS本身就有剪裁属性clip, 不过,需要在position为absolute后者fixed时候才有作用。

那本文主角clip-path与clip又是什么关系呢?

据说由于clip是扶不起的阿斗,于是W3弃之,开始培养clip-path为新一代的代言人。实际上,clip在可用性隐藏领域是独领风骚的!好吧,既然群众总是迷恋于浮于表面的东西,clip-path肯定不会像clip一样,慢慢变成沾满灰尘的半岛铁盒的。

自然,clip-path要想取代clip,第1步就是要实现clip应有的功能,方法值有所变化,不是rect了,而是inset. 看下面的代码对比:

1
2
3
4
5
6
7
8
.clip-me {  
  /* 被抛弃的剪裁 */
  position: absolute; /* absolute或fixed定位是必须的 */
  clip: rect(30px 200px 200px 20px); /* 或"auto" */

  /* 如今的剪裁 (无需定位属性) */
  clip-path: inset(30px 200px 200px 20px); /* 或"none" */
}

按照常识理解,四个方位值含义应该和传统clip: rect()是一模一样滴:
CSS3 SVG clip-path路径剪裁属性简介
但是,但是,注意前方高能!根据我在Chrome浏览器下的测试(目前为数不多支持clip-path:inset()的浏览器)下的测试,clip-path:inset()4个值的含义与传统clip: rect()是不一样的!

或许是目前的Chrome还不是很规范,但是,至少,当下,两者是有差别的。

例如,上面.clip-me {} 对应CSS代码应用到图片上,则会是这样子,一个剪裁,一个木有:
CSS3 SVG clip-path路径剪裁属性简介
已知,此妹子图片尺寸是256 * 191,此时,如果我们clip-path:inset()如下设置,则结果大不同:

1
2
3
.clip-me {
    clip-path: inset(30px 56px 0 20px);
}

则是下面这样:
CSS3 SVG clip-path路径剪裁属性简介
会看到剪裁区域大小都一样了!诶?我们不禁疑问,clip-path:inset()四个值的玄机在哪里?很简单,虽然四个值代表的方位是一样的,分别是上边缘、右边缘、下边缘和左边缘;但是,值大小对应的则是距离原始元素的4个边的距离(传统clip是对应“上/左”2个边距离)。加减示意下就是:

1
2
3
clip: rect(30px 200px 200px 20px)
=
clip-path: inset(30px (256-200)px (191-200)px 20px)

作为新时代的宠儿,自然inset不能就矩形剪裁这么点花样,例如:

1
2
3
4
.clip-path {
    -webkit-clip-path: inset(10% round 10% 50% 10% 50%);
            clip-path: inset(10% round 10% 50% 10% 50%);
}

则会让图片剪裁成这样子:
CSS3 SVG clip-path路径剪裁属性简介
其中round关键字表示圆角之意。然后前后个支持最多4个值,和border-radius类似,4个值分别对应左上角及顺时针方向3个角。前面4个值应该是外圆角,后面4个值应该表示内圆角。

2. clip-path与SVG clip-path

clip-path除了作为clip的替身,还是SVG clip-path属性的延伸。于是,SVG中玩得比较开心的东西CSS中也同样适用:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.clip-me {
  /* 剪裁路径来自内联SVG <clipPath>元素 */
  clip-path: url(#c1);

  /* 路径来自外部SVG */
  clip-path: url(path.svg#c1);

  /* 多边形 */
  clip-path: polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);

  /* 圆 */
  clip-path: circle(30px at 35px 35px);

  /* 椭圆 */
  clip-path: ellipse(65px 30px at 125px 40px);
}

看上去好NB, 但是,兼容性是很糟糕的现状。IE浏览器全军覆没。FireFox浏览器目前(v36)仅支持url()解析, Chrome浏览器要领先不少(同样有iOS Safari 7.1+, Android Browser 4.4+),不仅支持全部的图形解析,还支持内联SVG的url(#foo)解析,但是,外部SVG文件的url()解析还不支持。同时,目前(v42)部分特性需要添加-webkit-私有前缀的,如上面介绍的inset。

同时,基本上,path元素是无法支持的,主要是语法太复杂,无法在CSS中以简易规则书写。

当图形元素变成CSS clip-path的嫁衣时候,语法会有些变化:

1
2
3
4
5
6
7
.clip-examples {
  clip-path: rectangle(x, y, width, height, rounded-x, rounded-y)  
  clip-path: inset-rectangle(from top, from right, from bottom, from left, rounded-x, rounded-y)   /* 应使用inset()替换之~ */
  clip-path: polygon(a, bunch, of, points)
  clip-path: circle(radius at x, y)
  clip-path: ellipse(radius-x, radius-y at x, y)
}

clip-path在CSS语法中游走的时候,也传承了CSS3的一些高级特性,比方说transition过渡和animation动画,例如下面这个效果:
CSS3 SVG clip-path路径剪裁属性简介
别小看上面的效果,如果是纯粹的CSS技术,还真实现不了这般效果,因为总会有些位移(不服你可以挑战),只能使用这种剪裁或者mask遮罩实现。

相关CSS代码如下:

1
2
3
4
5
6
7
8
9
.clip-path {
    transition: 0.4s cubic-bezier(1, -1, 0, 2);
    -webkit-clip-path: circle(180px at 128px 95px);
    clip-path: circle(180px at 128px 95px);
}
.clip-path:hover {
    -webkit-clip-path: circle(95px at 128px 95px);
    clip-path: circle(95px at 128px 95px);
}

总结

在clip-path之前,我们可以利用盒模型,利用border-radius, border,transform,box-shadow等来创建诸如矩形,圆形,椭圆,三角形等一些简单的形状,clip-path为我们提供了多边形的创建方案,尽管它现在的支持性,兼容性还不是很好,但我们完全可以在一些特定的场景下使用它来代替图片了。当然,clip-path的作用不仅仅是如我上面介绍的那般简单,她还有很多奇妙的用处,尤其是配合动画一起使用,感兴趣的同学可以深入之……

「除特别注明外,本站所有文章均为码云笔记原创,转载请保留出处!」

赞(10) 打赏

觉得文章有用就打赏一下文章作者

支付宝
微信
10

觉得文章有用就打赏一下文章作者

支付宝
微信

上一篇:

下一篇:

你可能感兴趣

共有 0 条评论 - CSS3 SVG clip-path路径剪裁属性简介

博客简介

码云笔记网 mybj123.com,一个专注Web前端开发技术的博客,主要记录和总结博主在前端开发工作中常用的实战技能及前端资源分享,分享各种科普知识和实用优秀的代码,以及分享些热门的互联网资讯和福利!码云笔记网有你更精彩!
更多博客详情请看关于博客

精彩评论