一篇文章教会你使用SVG填充图案

SVG填充图案用于用由图像组成的图案填充形状。该图案可以由SVG图像(形状)或位图图像组成。SVG填充模式看起来就像从Photoshop等中所习惯的那样，被称为“平铺”。

一、填充图案

简单的svg填充模式。

示例：

 
 
 
 
    
  
  
  
  
  1. 
  
  
  
  
  2. 
  
  
  
  
    4. 
  
  
  
  
  4. 项目
    5. 
  
  
  
  
    6. 
  
  
  
  
    7. 
  
  
  
  
    8. 
  
  
  
  
    9. 
  
  
  
  
  9. 
  
  
  
  
  10. 
  
  
  
  
    12. 
  
  
  
  
  12.      
    13. 
  
  
  
  
  13. 
  
  
  
  
  14. 
  
  
  
  
  15.

代码解析：

首先，在元素内定义元素。图案包含一个circle元素。

circle元素将用作填充图案。其次，在CSS属性中声明一个元素fill，该元素引用其style属性中的元素ID。

其次，声明一个元素，该元素在CSS fill属性中引用其样式属性中的元素ID。

运行后图像效果：

注意

元素中定义的圆是如何用作矩形的填充的。还要注意圆圈是如何从左到右，从上到下不断重复的。

二、X，Y，宽度和高度

pattern元素的x和y属性定义图案开始在元素中的形状中的距离。元素的width和height属性定义图案的宽度和高度。

案例分析

这是从头开始的示例，并且将x和y设置为0：

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2.    
    3. 
  
  
  
  
  3.        
  
  
  
  
  4.                 x="0" y="0" width="20" height="20"
    5. 
  
  
  
  
  5.                 patternUnits="userSpaceOnUse">
    6. 
  
  
  
  
  6. 
  
  
  
  
  7.        
    8. 
  
  
  
  
  8.          
    9. 
  
  
  
  
  9.        
    10. 
  
  
  
  
  10.    
    11. 
  
  
  
  
  11.    
  
  
  
  
  12.          style="stroke: #000000; fill: url(#pattern2);" />
    13. 
  
  
  
  
  13.

运行后图像效果：

注意

图案现在是如何从圆的中间开始的(在矩形的顶部和左侧)。创建自己的填充图案时，通过使用x和y属性值来实现所需的效果。

width和height属性设定的图案的宽度和高度。

在前面的示例中width，height它们都设置为20，即圆的直径。因此，圆圈一遍又一遍地重复着，中间没有空格。

设置图案的width(宽度)为25，而不是20。

这样，现在在水平圆圈之间现在有5个像素间隔。

 
 
 
 
    
  
  
  
  
    2.

width, height都设置为25

下面是相同的实例，但是x和y设置为10 (元素内的圆心)

 
 
 
 
    
  
  
  
  
    2.

现在，图案从一个完整的圆圈开始，但是仍然有多余的垂直和水平空间。

三、嵌套模式

可以嵌套填充图案，以便填充图案在内部使用另一个填充图案。

该示例具有一个使用圆形作为填充图案的矩形。圆内部使用矩形作为填充图案。

示例：

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
    3. 
  
  
  
  
    4. 
  
  
  
  
    5. 
  
  
  
  
  5. 
  
  
  
  
    7. 
  
  
  
  
    8. 
  
  
  
  
  8. 
  
  
  
  
  9. 
  
  
  
  
    11. 
  
  
  
  
  11.

运行后图像效果：

外部矩形现在由圆形填充，圆形又由矩形填充。

四、转换模式

可以使用标准SVG转换函数转换填充模式。可以使用patternTransform属性来实现这一点。

SVG模式转换示例

定义了一个简单的图案，该图案在用作矩形的填充图案之前旋转了35度。

 
 
 
 
    
  
  
  
  
  1.     
    2. 
  
  
  
  
  2.     
    3. 
  
  
  
  
  3. 
  
  
  
  
  4. x="10" y="10" width="20" height="20"    
    5. 
  
  
  
  
  5. patternUnits="userSpaceOnUse"    
    6. 
  
  
  
  
  6. patternTransform="rotate(35)"    
    7. 
  
  
  
  
  7. >    
    8. 
  
  
  
  
  8.     
    9. 
  
  
  
  
  9.     
    10. 
  
  
  
  
  10.     
    11. 
  
  
  
  
  11. 
  
  
  
  
  12. style="stroke: #000000; fill: url(#transformedPattern);" />    
    13. 
  
  
  
  
  13.

运行后图像效果：

五、总结

本文基于Html基础，讲解了有关SVG中的填充的相关知识点。如何去填充一个图案，通过改变其中的属性，呈现不一样的填充效果。以及嵌套模式，转换模式的实际应用。

通过案例的分析，效果图的展示，能够让读者更好的去理解填充图的属性。

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

当前文章：一篇文章教会你使用SVG填充图案
文章网址：http://www.shufengxianlan.com/qtweb/news43/352143.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

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

猜你还喜欢下面的内容

网站设计知识

同城分类信息

中国电信西部信息中心机房　　 　成都网站推广　　 　成都茶叶销售　　 　川银永信　　 　网页设计　　 　成都小程序制作　　 　国泰民安消防　　 　成都网站代运营　　 　高端定制网站设计　　 　达州做网站　　 　内江做网站　　 　高端品牌网站建设　　 　软文平台　　 　乐山网站建设　　 　成都标识标牌设计制作　　 　装饰公司网站建设方案　　 　南京护栏钻孔机　　 　成都网站制作　　 　乐山中领科信　　 　雅安移动机房