SVG渐变(4)
径向渐变
#svg{
width: 500px;
height: 500px;
border: 1px solid #ccc;
}
<svg id="svg">
<defs>
<radialGradient id="gradient" cx="50%" cy="50%" r="25%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:green;"></stop>
<stop offset="100%" style="stop-color:red;"></stop>
</radialGradient>
</defs>
<rect x="0" y="0" width="500" height="500" style="fill:url(#gradient)"></rect>
</svg>
通过上述例子来解读相关属性:
radialGradient中的属性:
cx,cy确定圆心坐标——百分数相对于svg元素大小
r确定半径
fx,fy确定渐变焦点坐标——即渐变开始的那个点的坐标(百分数相对于svg元素大小)
通过上述我们也可以看出渐变的使用方法
通过
<defs>
<radialGradient id="gradient" cx="50%" cy="50%" r="25%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:green;"></stop>
<stop offset="100%" style="stop-color:red;"></stop>
</radialGradient>
</defs>
定义一个渐变
像这样使用
style="fill:url(#gradient)"
线性渐变
<svg id="svg">
<defs>
<linearGradient id="bg1" x1="0" y1="0" x2="0" y2="50%">
<stop offset="0%" style="stop-color:rgb(255,255,0);"/>
<stop offset="100%" style="stop-color:rgb(255,0,0);"/>
</linearGradient>
</defs>
<rect x="0" y="0" width="500" height="500" style="fill:url(#bg1)"></rect>
</svg>
通过上述例子来解读相关属性:
linearGradient中的属性:
x1,y1起始点坐标,百分数相对于svg元素大小
x2,y2确定终止点坐标,百分数相对于svg元素大小
两个点确定了渐变方向、长度
高斯滤镜
#svg{
width: 500px;
height: 500px;
border: 1px solid #ccc;
}
<svg id="svg">
<defs>
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="20"/>
</filter>
</defs>
<rect x="0" y="0" width="500" height="500" style="filter:url(#Gaussian_Blur)"></rect>
</svg>