SVG进阶|SVG剪裁路径

来源：懂视网责编：小采时间：2020-11-27 15:16:59

SVG进阶|SVG剪裁路径: SVG剪裁路径是指根据指定的路径或形状来剪裁SVG图形。应用了剪裁路径的SVG图形，在剪裁路径内部的图形可以被显示出来，在剪裁路径之外的图形会被隐藏。剪裁路径的例子下面是一个简单的SVG剪裁路径的例子： style=fill: #0

推荐度：

点击下载本文 文档为doc格式

导读SVG进阶|SVG剪裁路径: SVG剪裁路径是指根据指定的路径或形状来剪裁SVG图形。应用了剪裁路径的SVG图形，在剪裁路径内部的图形可以被显示出来，在剪裁路径之外的图形会被隐藏。剪裁路径的例子下面是一个简单的SVG剪裁路径的例子： style=fill: #0

　　SVG剪裁路径是指根据指定的路径或形状来剪裁SVG图形。应用了剪裁路径的SVG图形，在剪裁路径内部的图形可以被显示出来，在剪裁路径之外的图形会被隐藏。

　　剪裁路径的例子

　　下面是一个简单的SVG剪裁路径的例子：

　　这个例子定义了一个矩形的剪裁路径(中的元素)。在后面的SVG圆形中，通过style属性的clip-path指向了这个剪裁路径。

　　下面的左边图像是返回结果。右边的图像也是返回结果，但是它将剪裁路径一起显示出来了。

　　注意观察，只有在矩形剪裁路径内部的圆形才会被显示出来，之外的部分会被剪裁掉。

　　高级剪裁路径

　　你可以使用任何图形来作为剪裁路径。可以是圆形、椭圆、多边形或自定义路径。

　　在下面的例子中使用一条自定义路径来作为剪裁路径。这条剪裁路径会被应用到一个元素上。

　　在下面的右边的图像是返回结果，左边的图像是没有使用剪裁路径的矩形。

　　在组(GROUPS)中应用剪裁路径

　　我们可以对一组SVG图形使用剪裁路径。实现的方法是将所有的图形放到一个元素中，然后设置元素的clip-pathCSS属性。下面是一个例子：

　　在下面左边的图像是没有使用剪裁路径的图像。右边的图像是上面代码的返回结果。

　　文字剪裁路径

　　我们还可以使用文字来作为剪裁路径。使用SVG 来作为剪裁路径的一个好处是你可以自定义字体。下面是一个简单的文字剪裁路径的例子：

　　下面左边的图像没有使用剪裁路径。右边的图像使用了文字剪裁路径。

　　本文版权属于jQuery之家，转载请注明出处：http://www.htmleaf.com/ziliaoku/ ... g/201507032160.html

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

推荐度：

点击下载本文 文档为doc格式

标签：路径进阶 svg