当前位置：主页 > 查看内容

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

发布时间：2021-09-09 00:00| 有 位朋友查看

简介：SVG剪切路径(也称为SVG剪切)用于根据特定路径剪切SVG形状。路径内部的形状部分可见，外部的部分不可见。 一、剪辑路径 这是一个简单的剪辑路径。 SVG代码： !DOCTYPEhtml html head metacharset= utf-8 title项目/title /head bodystyle= background-color:a……

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

一、剪辑路径

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

SVG代码：

  1. <!DOCTYPE html> 
  2. <html> 
  3.     <head> 
  4.         <meta charset="utf-8"> 
  5.         <title>项目</title> 
  6.     </head> 
  7.     <body style="background-color: aqua;"> 
  8.         <svg width="200" height="100" style="border: 1px solid #cccccc;"> 
  9.             <defs> 
  10.                 <clippath id="clipPath"> 
  11.                     <rect x="15" y="15" width="40" height="40"></rect> 
  12.                 </clippath> 
  13.             </defs> 
  14.             <circle cx="25" cy="25" r="20" style="fill: #ff0000s; clip-path: url(#clipPath); "></circle> 
  15.         </svg> 
  16.         <svg width="200" height="100" style="border: 1px solid #cccccc;"> 
  17.             <defs> 
  18.                 <clippath id="clipPath2"> 
  19.                     <rect x="15" y="15" width="40" height="40"></rect> 
  20.                 </clippath> 
  21.             </defs> 
  22.             <circle cx="25" cy="25" r="20" style="fill: #ff0000; clip-path: url(#clipPath2); "></circle> 
  23.             <rect x="15" y="15" width="40" height="40" style="stroke: #000000; fill:none;"></rect> 
  24.         </svg> 
  25.     </body> 
  26. </html> 

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

运行效果：

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

注

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

二、高级剪切路径

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

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

SVG代码：

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

运行效果：

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

1. 在组上剪裁路径

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

示例SVG代码

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

运行效果：

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

2. 文本作为剪切路径

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

SVG代码：

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

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

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

三、总结

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

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

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

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


本文转载自网络，原文链接：https://mp.weixin.qq.com/s/1j_fNfcopOrAoZuOZHJTBA
本站部分内容转载于网络，版权归原作者所有，转载之目的在于传播更多优秀技术内容，如有侵权请联系QQ/微信：153890879删除，谢谢！
上一篇：快放开那些捣乱的猴子！ 下一篇：没有了

推荐图文

  • 周排行
  • 月排行
  • 总排行

随机推荐