一篇文章带你了解SVG 剪切路径

SVG剪切路径(也称为SVG剪切)用于根据特定路径剪切SVG形状。路径内部的形状部分可见，外部的部分不可见。

创新互联建站专注为客户提供全方位的互联网综合服务，包含不限于成都做网站、成都网站建设、庆元网络推广、微信小程序开发、庆元网络营销、庆元企业策划、庆元品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；创新互联建站为所有大学生创业者提供庆元建站搭建服务，24小时服务热线：028-86922220，官方网址：www.cdcxhl.com

一、剪辑路径

这是一个简单的剪辑路径。

SVG代码：

 
 
 
 
      
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3.      
    4.   
  
  
  
  4.          
    5.   
  
  
  
  5.         项目 
    6.   
  
  
  
  6.      
    7.   
  
  
  
  7.      
    8.   
  
  
  
  8.          
    9.   
  
  
  
  9.              
    10.   
  
  
  
  10.                  
    11.   
  
  
  
  11.                      
    12.   
  
  
  
  12.                  
    13.   
  
  
  
  13.              
    14.   
  
  
  
  14.              
    15.   
  
  
  
  15.          
    16.   
  
  
  
  16.          
    17.   
  
  
  
  17.              
    18.   
  
  
  
  18.                  
    19.   
  
  
  
  19.                      
    20.   
  
  
  
  20.                  
    21.   
  
  
  
  21.              
    22.   
  
  
  
  22.              
    23.   
  
  
  
  23.              
    24.   
  
  
  
  24.          
    25.   
  
  
  
  25.      
    26.   
  
  
  
  26.  
    27.

这个实SVG代码定义了一个形状类似于矩形(元素中的形状)的剪辑路径。示SVG代码末尾定义的圆通过CSS属性 clip-path 引用了 id属性。

运行效果：

左下方是生成的图像。右边是同一图像，但也绘制了剪切路径。

注

在剪切路径内只有圆的部分是可见的。其余部分将被剪切。

二、高级剪切路径

可以使用矩形以外的其他形状作为剪切路径。可以使用圆形，椭圆形，多边形或自定义路径。任何SVG形状都可以用作剪切路径。

这是将元素用作剪切路径的示SVG代码，因为这些是可以使用的最高级的剪切路径类型。剪辑路径将应用于元素。

SVG代码：

 
 
 
 
      
  
  
  
  1.  
    2.   
  
  
  
  2.      
    3.   
  
  
  
  3.  
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5.      
    6.   
  
  
  
  6.          
    7.   
  
  
  
  7.              
    8.   
  
  
  
  8.          
    9.   
  
  
  
  9.      
    10.   
  
  
  
  10.      
    11.   
  
  
  
  11.  
    12.

运行效果：

这是生成的图像-在右侧。左侧显示没有剪切路径的图像。

1. 在组上剪裁路径

可以在一组SVG形状上使用剪切路径，而不是分别在每个形状上使用。只需将形状放在元素内，然后在元素上设置CSS属性clip-path即可。这是一个实SVG代码：

示例SVG代码

 
 
 
 
      
  
  
  
  1.  
    2.   
  
  
  
  2.      
    3.   
  
  
  
  3.      
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5.  
    6.   
  
  
  
  6.      
    7.   
  
  
  
  7.          
    8.   
  
  
  
  8.              
    9.   
  
  
  
  9.          
    10.   
  
  
  
  10.      
    11.   
  
  
  
  11.      
    12.   
  
  
  
  12.          
    13.   
  
  
  
  13.          
    14.   
  
  
  
  14.      
    15.   
  
  
  
  15.  
    16.

运行效果：

下面是没有剪切路径的图像，然后是应用剪切路径的图像：

2. 文本作为剪切路径

也可以将文本用作剪切路径。这是一个实SVG代码：

SVG代码：

 
 
 
 
      
  
  
  
  1.  
    2.   
  
  
  
  2.              
    3.   
  
  
  
  3.              
    4.   
  
  
  
  4.          
    5.   
  
  
  
  5.          
    6.   
  
  
  
  6.              
    7.   
  
  
  
  7.                  
    8.   
  
  
  
  8.                      
    9.   
  
  
  
  9.                         This is a text 
    10.   
  
  
  
  10.                      
    11.   
  
  
  
  11.                  
    12.   
  
  
  
  12.              
    13.   
  
  
  
  13.              
    14.   
  
  
  
  14.                  
    15.   
  
  
  
  15.                  
    16.   
  
  
  
  16.              
    17.   
  
  
  
  17.          
    18.

这是带有和不带有剪切路径的结果图像：

正如看到的，现在只显示文本内部形状的一部分。

三、总结

本文基于SVG基础，介绍了如何剪切路径，可以根据特定路径剪切SVG形状。还介绍了高级的剪切路径(在组上剪裁路径、文本作为剪切路径)通过项目的分析，案例的效果图的展示，能够让读者更好的理解SVG路径剪切的用法。

欢迎大家积极尝试，有时候看到别人实现起来很简单，但是到自己动手实现的时候，总会有各种各样的问题，切勿眼高手低，勤动手，才可以理解的更加深刻。

希望能够帮助你更好的学习。

本文转载自微信公众号「 前端进阶学习交流」，可以通过以下二维码关注。转载本文请联系 前端进阶学习交流公众号。

本文标题：一篇文章带你了解SVG 剪切路径
网页路径：http://www.mswzjz.cn/qtweb/news2/23402.html

攀枝花网站建设、攀枝花网站运维推广公司-贝锐智能，是专注品牌与效果的网络营销公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 贝锐智能

贝锐智能技术为您推荐以下文章

定制网站知识

各行业网站

东方电机技改　　 　泸州网站建设　　 　帝美豪门窗　　 　做网站价格　　 　网站解决方案　　 　www.tpbzx.cn　　 　网站推广公司　　 　小谭建站　　 　盐亭网站设计　　 　诚信建站　　 　成都关键词SEO优化　　 　成都网站优化　　 　郫县明安消防器材　　 　香港虚拟主机　　 　电信服务器托管　　 　雅安机房托管　　 　成都网站建设公司　　 　攀枝花网站建设　　 　佑馨产后护理　　 　成都网站制作