0%
svg之渐变填充
发表于
分类于
笔记
与图案(pattern
)一样,渐变也只是专门用来被填充的,所以也需要事先在defs
中进行定义。
SVG
中的渐变分为线性渐变(linearGradient
)和径向渐变(radialGradient
)两种,从名字就能看出这是两种不同方向的渐变,所以参数也会有所不同。
线性渐变
线性渐变由linearGradient
标签所定义,线性渐变主要受直线的方向和渐变点的位置的影响,也就是沿着直线的方向按照渐变点的颜色设置进行变化。
渐变点
渐变点就是在linearGradient
标签内所定义的<stop>
元素,该元素有以下的属性:
-
offset:偏离位置,范围为0-1(0%-100%);实际上就是在直线方向(这个方向其实可看作向量方向)上的位置。
-
stop-color:该渐变点的颜色
-
stop-opacity:该渐变点的不透明度
svg之图案填充
发表于
分类于
笔记
在SVG
中的图案(pattern
),可以理解为通过重复填充某一图形得到的图像。因此被重复填充的那个图形可视为图案的填充单元(tile
,直译就是瓷砖),最终得到的图案就取决于如何在整个图案区域中重复这一填充单元以及在分配到的单元格中如何填充这个图形。
css3 3D transform
发表于
分类于
技术