CSS和SVG中的剪切——clip-path属性和<clipPath>元素

最新推荐文章于 2024-08-09 08:29:09 发布

weixin_33895695

最新推荐文章于 2024-08-09 08:29:09 发布

阅读量237

点赞数

剪切是什么

剪切是一个图形化操作，你可以部分或者完全隐藏一个元素。被剪切的元素可以是一个容器也可以是一个图像元素。元素的哪些部分显示或隐藏是由剪切的路径来决定的。

CSS和SVG中的剪切

剪切路径定义了一个区域，在这个区域内的内容将会显示，而不在这个区域内的内容不会显示。这个区域被称之为“裁剪区域”。只要在这个区域之外的任何元素都不会显示。包括元素的内容、背景、边框、文本、轮廓等，甚至还包括他的子元素。

剪切的元素可以是任何容器和图片元素。

剪切路径的概念就相当于在元素上定义了一个视窗。它决定了元素哪些部分在这个“视窗”中显示，哪些部分不在这个“视窗”中显示。但他不会影响自身文档流和其他文档流，因为他通常还是以一个矩形区域显示在其他文档流前面，哪怕是剪切出来的区域是不规则的矩形。如果你想改变周围内容元素围绕剪切出来的图形，那就需要使用CSS的图形属性。如果你对这方面知识感兴趣，可以阅读我早前写的相关文章。

有关于CSS3 Shapes相关中文教程，可以阅读早前翻译的两篇文章：

使用CSS Shapes的Regions创建更好的阅读体验
CSS Shapes 101

CSS中的剪切——`clip-path`属性

clip-path属性是CSS Masking模块的一部分。自从2000年以来，剪切都只是SVG中的一部分，现在将这个功能引入到CSS的Msking模块中，所以现在可以对HTML元素和SVG元素进行剪切。

clip-path属性是指定一个应用到元素上的剪切路径。应用在SVG中<clipPath>元素上的属性值可以完全运用在clip-path的属性上。你还可以使用CSS Shapes模块中的基本形状来定义剪切路径。这些形状你可以使用形状函数来创建。这些形状态函数包括polygon()、circle()、inset()(用来定义嵌入的矩形)和ellipse()。

使用clip-path属性将一个剪切路径运用在一个元素上非常的简单：

/* SVG中的clipPath的使用 */
.element { clip-path: url(#svgClipPathID); } /* 使用CSS中的基本图形函数 */ .element { clip-path: polygon(...); /* 或者其他的图形函数 */ }

例如，我们使用polygon()函数定义一个多边形的剪切路径，并且把这个路径应用到一个图像上，代码看起来像这样：

img {
    clip-path: polygon(626px 463px,765px 236px,687px 31px,271px 100px,70px 10px,49px 250px,133px 406px,374px 462px,529px 393px); }

应用上面的代码之后，图像显示成这样：

查看DEMO

基本图形函数允许我们创建一定数量的图形，其中最复杂的就是多边形。如果你想创建一个更为复杂的图形，而且图形看起来不是用直线画出来的，这个时候你就需要使用SVG的<clipPath>元素。正如<clipPath>元素名称所暗示的一样，你可以使用这个元素绘制任意路径的图形。这也意味着，你可以使用<clipPath>元素绘制出任意图形来做为一个剪切路径。

在我们第二个示例中，使用SVG的clipPath定义一个路径，这个剪切路径看起来像这样：

<svg height="0" width="0"> <defs> <clipPath id="svgPath"> <path fill="#FFFFFF" stroke="#000000" stroke-width="1.5794" stroke-miterlimit="10" d="M215,100.3c97.8-32.6,90.5-71.9,336-77.6　c92.4-2.1,98.1,81.6,121.8,116.4c101.7,149.9,53.5,155.9,14.7,178c-96.4,54.9,5.4,269-257,115.1c-57-33.5-203,46.3-263.7,20.1 c-33.5-14.5-132.5-45.5-95-111.1C125.9,246.6,98.6,139.1,215,100.3z"/> </clipPath> </defs> </svg>

这剪切路径看起来就像一个黑色的描边圈了一个不规则的图形，这是一个简单的剪切路径，不带有任何的填充。

CSS和SVG中的剪切

在下一部分中，我们将着重讨论SVG的<clipPath>元素。但现在，我们来看看如何将定义好的路径运用到图片上：

img {
    clip-path: url(#svgPath); }

最终效果如下所示：

查看DEMO

事实上，<clipPath>元素包括很多个基本图形（<rect>，<circle>等），<path>元素，甚至是<text>元素。

如果在<clipPath>里面通过<text>指定文本，那么这个文本就会当成是一个剪切路径，不管文是否可见，文本外的区域都将被剪切掉。

注意，你可以使用任何文本做为剪切路径。这为实现很多效果开启了一扇大门。你可以使用动画图片（比如，gif）,甚至是视频，然后选择你需要的文本进行剪切。这里是没有任何限制的。

下面的示例，就是使用文本做为剪切路径：

<svg height="0" width="0"> <defs> <clipPath id="svgTextPath"> <text x="0" y="300" textLength="800px" lengthAdjust="spacing" font-family="Vollkorn" font-size="230px" font-weight="700" font-style="italic"> Blossom </text> </clipPath> </defs> </svg>

SVG中的<text>最酷的特点就是可以使用自定义字体，就像HTML文本。在我们的示例中使用了Google Web Fonts中的Vollkorn字体。使用textLength属性，将文本的宽度设置的和图片宽度一样，并且通过x和y来定位文本。注意，x和y坐标确认了文本左下角的位置（也就是文本的基线baseline）。

使用上面的文本路径剪切图来的图片效果如下：

查看DEMO

正如我们前面提到的，你还可以在<clipPath>中使用多个图形形状。在下一节中，将会深入介绍<clipPath>，这里我们先简单的了解。在这个示例中，我们使用了多个<circle>形状，他们大小不同，位置不同。

<svg height="0" width="0"> <defs> <clipPath id="svgPath"> <circle stroke="#000000" stroke-miterlimit="10" cx="50" cy="50" r="40" /> <circle stroke="#000000" stroke-miterlimit="10" cx="193.949" cy="235" r="74.576"/> <circle stroke="#000000" stroke-miterlimit="10" cx="426.576" cy="108.305" r="47.034"/> <circle stroke="#000000" stroke-miterlimit="10" cx="346.915" cy="255.763" r="43.644"/> <circle stroke="#000000" stroke-miterlimit="10" cx="255.39" cy="82.882" r="35.17"/> <!-- more circles... --> </clipPath> </defs> </svg>

此时，图像只会在圆中显示，圆外就不会显示：

查看DEMO

正如我们这篇文章中介绍的，你可以使用clip-path属性应用在SVG元素绘制的路径。在上面演示的示例，剪切路径都是应用在HTML中的<img>元素上。在接下来的示例中，将演示的是一个剪切路径用于<svg>的根元素。同样是樱花图片，使用下面SVG的中的<image>来引用。

SVG中的<image>元素用来引用一个完整的SVG或像素图像。如果你在<image>中引用的SVG图像，设置的width和height属性，将会用来设置SVG视窗的大小。如果你引用的是像素图像（我们这里的例子就是这样做的），图像将会自动缩放到指定的width和height。所以我们要确认好他们的长宽比例，避免图像扭曲。

当你创建一个SVG时，你可以在<svg>元素上指定其宽度和高度的大小，用于创建一个窗口。任何超过这个窗口的内容都将不会显示出来。你可以通过<clipPath>元素定制一个窗口。

<svg height="500" width="800"> <image xlink:href="flowers.jpg" x="0" y="0" width="800" height="500"/> <defs> <clipPath id="theSVGPath"> <rect x="0" y="0" stroke="#000000" stroke-miterlimit="10" width="108" height="500"/> <rect x="121.5" y="25.5" stroke="#000000" stroke-miterlimit="10" width="55" height="455"/> <rect x="192.5" y="9.5" stroke="#000000" stroke-miterlimit="10" width="60" height="484"/> <rect x="271.5" y="44.5" stroke="#000000" stroke-miterlimit="10" width="63" height="416"/> <rect x="349.5" y="25.5" stroke="#000000" stroke-miterlimit="10" width="208" height="447"/> <rect x="574.5" y="44.5" stroke="#000000" stroke-miterlimit="10" width="60" height="446"/> <rect x="644.5" y="9.5" stroke="#000000" stroke-miterlimit="10" width="68" height="471"/> <rect x="736.5" y="18.5"