学习SVG（七）图案和渐变填充

2023-08-20 01:59| 来源: 网络整理| 查看: 265

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第7天，点击查看活动详情。

简介

在SVG中图形的填充和轮廓除了使用纯色，还可以使用图案和渐变。

图案填充图案填充需要使用patterns元素，填充类型之一。 patternUnits属性设置图案如何排列。默认值objectBoundingBox。使用objectBoundingBox，图案的大小基于要填充对象的大小计算。

1.2 设置了宽高20%。在图案中绘制了一个20px的正方形。第一个图20%小于20px正方形被截取，然后平铺图案。第二个图20%大于20px，图案变大，然后平铺图案。

使用userSpaceOnUse属性根据width和height制定图案。

2.2 根据设置的width和height生成图案后平铺。

patternContentUnits属性设置图案中图形宽高使用什么类型。默认值userSpaceOnUse。 userSpaceOnUse 使用默认坐标类型px设置图案的大小。 objectBoundingBox 使用百分比来设置图案的大小。

2.1 能看见图案中的正方形也是百分比计算的。

渐变色填充 linearGradient 线性渐变，一系列颜色沿着一条直线过渡，在特定的位置指定想要的颜色。属性: x1,y1 渐变的起点位置，使用百分比表示，默认的渐变方向是从左到右。 x2,y2 渐变的终点位置，使用百分比表示。 spreadMethod 设置渐变填充方式。

radialGradient 径向渐变，每个渐变点是一个圆形路径，从中心点向外扩散。属性: cx,cy,r 定义渐变的范围，测量半径的单位是对象的宽高均值。默认值50%。 fx,fy 0%点所处的圆路径的圆心。 spreadMethod 设置绘制范围没有到达图形边缘的情况。

stop元素，设置渐变点。 offset属性，指定渐变点位置。取值范围0%-100%。 stop-color属性，对应offset位置点的颜色。 stop-opacity属性，对应offset位置点的不透明度。

【本文地址】

今日新闻