文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2024-12-03 15:47

关注

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

一、剪辑路径

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

SVG代码:

  1.  
  2.  
  3.      
  4.         "utf-8"
  5.         项目 
  6.      
  7.     "background-color: aqua;"
  8.         "200" height="100" style="border: 1px solid #cccccc;"
  9.              
  10.                 "clipPath"
  11.                     "15" y="15" width="40" height="40"
  12.                  
  13.              
  14.             "25" cy="25" r="20" style="fill: #ff0000s; clip-path: url(#clipPath); "
  15.          
  16.         "200" height="100" style="border: 1px solid #cccccc;"
  17.              
  18.                 "clipPath2"
  19.                     "15" y="15" width="40" height="40"
  20.                  
  21.              
  22.             "25" cy="25" r="20" style="fill: #ff0000; clip-path: url(#clipPath2); "
  23.             "15" y="15" width="40" height="40" style="stroke: #000000; fill:none;"
  24.          
  25.      
  26.  

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

运行效果:

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

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

二、高级剪切路径

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

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

SVG代码:

  1. "200" height="100" style="border: 1px solid #cccccc;"
  2.     "5" y="5" width="190" height="90" style="stroke: none; fill:#00ff00; "
  3.  
  4. "200" height="100" style="border: 1px solid #cccccc;"
  5.      
  6.         "clipPath3"
  7.             "M10,10 q60,60 100,0 q50,50 50,50 l40,0 l-40,40 l-100,-20"
  8.          
  9.      
  10.     "5" y="5" width="190" height="90" style="stroke: none; fill:#00ff00; clip-path: url(#clipPath3);"
  11.  

运行效果:

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

1. 在组上剪裁路径

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

示例SVG代码

  1. "200" height="100" style="border: 1px solid #cccccc;"
  2.     "5" y="5" width="190" height="90" style="stroke: none; fill:#00ff00; "
  3.     "20" cy="20" r="20" style="stroke: none; fill: #ff0000;"
  4.  
  5. "200" height="100" style="border: 1px solid #cccccc;"
  6.      
  7.         "clipPath4"
  8.             "10" y="20" width="100" height="20"
  9.          
  10.      
  11.     "clip-path: url(#clipPath4);"
  12.         "5" y="5" width="190" height="90" style="stroke: none; fill:#00ff00;"
  13.         "20" cy="20" r="20" style="stroke: none; fill: #ff0000;"
  14.      
  15.  

运行效果:

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

2. 文本作为剪切路径

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

SVG代码:

  1. "200" height="100" style="border: 1px solid #cccccc;"
  2.             "5" y="5" width="190" height="90" style="stroke: none; fill:#00ff00; "
  3.             "20" cy="20" r="20" style="stroke: none; fill: #ff0000;"
  4.          
  5.         "200" height="100" style="border: 1px solid #cccccc;"
  6.              
  7.                 "clipPath5"
  8.                     "10" y="20" style="font-size: 20px; "
  9.                         This is a text 
  10.                      
  11.                  
  12.              
  13.             "clip-path: url(#clipPath5);"
  14.                 "5" y="5" width="190" height="90" style="stroke: none; fill:#00ff00;"
  15.                 "20" cy="20" r="20" style="stroke: none; fill: #ff0000;"
  16.              
  17.          

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

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

三、总结

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

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

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

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

 

 

来源:前端进阶学习交流内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯