SVG渐变(4)

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>

其他滤镜请看http://www.w3school.com.cn/svg/svg_filters_intro.asp