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

clip-path 介绍

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

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

SVG 中的 clip-path

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

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

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

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

按照我们浅显的认识，应该会出现一个填充某种颜色的圆，类似下截图效果：

但是，如果此时该圆同时设置了 clip-path 属性，且值指向的就是上面定义的剪裁路径#clipPath 呢？

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

则，十五的圆被剪裁成了银杏叶：

跟<g>, <symbol>等元素类似，<clipPath>元素里面除了 rect 元素, 还可以是 circle, ellipse, line, polyline, polygon, …等等，甚至是 text 文本。

<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 浏览器下的文字剪裁极具马赛克风格，类似下面：

而其他浏览器，例如 IE 浏览器，则表现正常：

上面列举了“矩形剪裁”和“文本剪裁”两个例子，大家有木有发现在应用 clip-path 属性的时候有什么差别？

啊~这位同学眼睛很尖，一眼就看出来，前者直接标签属性；后者则是 style 样式设置（红色高亮代码）：

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. 看下面的代码对比：

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

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

按照常识理解，四个方位值含义应该和传统 clip: rect()是一模一样滴：

但是，但是，注意前方高能！根据我在 Chrome 浏览器下的测试（目前为数不多支持 clip-path:inset()的浏览器）下的测试，clip-path:inset()4 个值的含义与传统 clip: rect()是不一样的！

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

例如，上面.clip-me {} 对应 CSS 代码应用到图片上，则会是这样子，一个剪裁，一个木有：

已知，此妹子图片尺寸是 256 * 191，此时，如果我们 clip-path:inset()如下设置，则结果大不同：

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

则是下面这样：

会看到剪裁区域大小都一样了！诶？我们不禁疑问，clip-path:inset()四个值的玄机在哪里？很简单，虽然四个值代表的方位是一样的，分别是上边缘、右边缘、下边缘和左边缘；但是，值大小对应的则是距离原始元素的 4 个边的距离（传统 clip 是对应“上/左”2 个边距离）。加减示意下就是：

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

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

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

则会让图片剪裁成这样子：

其中 round 关键字表示圆角之意。然后前后个支持最多 4 个值，和 border-radius 类似，4 个值分别对应左上角及顺时针方向 3 个角。前面 4 个值应该是外圆角，后面 4 个值应该表示内圆角。

2. clip-path 与 SVG clip-path

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

.clip-me { 
  /* 剪裁路径来自内联 SVG 元素 */
  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 的嫁衣时候，语法会有些变化：

.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 动画，例如下面这个效果：

别小看上面的效果，如果是纯粹的 CSS 技术，还真实现不了这般效果，因为总会有些位移（不服你可以挑战），只能使用这种剪裁或者 mask 遮罩实现。

相关 CSS 代码如下：

.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 的作用不仅仅是如我上面介绍的那般简单，她还有很多奇妙的用处，尤其是配合动画一起使用，感兴趣的同学可以深入之……

以上关于CSS3 SVG clip-path路径剪裁属性简介的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。