SVG滤镜及渐变

SVG滤镜

偏移滤镜

<svg width="100%" height="500">
    <!-- 定义滤镜 -->
    <defs>
        <filter id="f1" width="200%" height="200%">
            <!-- 偏移滤镜 -->
            <feOffset in="SourceGraphic" resurt="offset1" dx="20" dy="20" />
        </filter>
    </defs>
    <!-- 方块        使用filter过滤属性绑定滤镜id -->
    <rect x="50" y="50" width="200" height="100" fill="blue" stroke="red" filter="url(#f1)" />
</svg>

当写上偏移路径之后会发现页面上的长方形的位置有偏移，说明滤镜已经添加上了

 

需要在设置一个混合滤镜，使原始标签显示出来

<feBlend in="SourceGraphic" mode="normal" />

 

模糊滤镜

<filter id="f1" width="200%" height="200%">
    <!-- 偏移滤镜 -->
    <feOffset in="SourceGraphic" resurt="offset1" dx="20" dy="20" />
    <!-- 模糊滤镜 -->
    <feGaussianBlur in="colorMatrix" result="mohu" stdDeviation="10" />
    <!-- 混合滤镜 -->
    <feBlend in="SourceGraphic" in2="mohu" mode="normal" />
</filter>

给模糊滤镜添加一个result属性 （值自定义），在混合滤镜中添加一个in2绑定上模糊路径的result值

 

<defs>标签定义滤镜

<filter>元素id属性定义一个滤镜的唯一名称

SVG滤镜包括：

feBlend：与图像相结合的滤镜 ！！混合滤镜

feColorMatrix：用于彩色滤光片转换

        通过values属性来控制颜色

        rgba对应着红、绿、蓝及不透明度

        values="rgba"

        r 0.1 0 0 0 0

        g 0 0.1 0 0 0

        b 0 0 0.1 0 0

        a 0 0 0 0.1 0

feComponentTransfer 复合滤镜

feComposite

feConvolveMatrix

feDiffuseLighting

feDisplacementMap

feFlood

feGaussianBlur：模糊滤镜

stdDeviation:

feImage

feMerge：多滤镜叠加滤镜

feMorphology

feOffset：过滤阴影

feSpecularLighting

feTile

feTurbulence

feDistantLight：用于照明过滤

fePointLight：用于照明过滤

FeSpotLight：用于照明过滤

滤镜的属性：

属性	作用
x,y	提供左上角的坐标来定义在哪里渲染滤镜效果
width,height	绘制滤镜容器的高和宽（默认100%）
result	用于定义一个滤镜效果的输出名字，以便将其用作另一个滤镜的输出(in)
in	指定滤镜效果的输出源，也可以是某个滤镜导出的result，也可以是下面6个值

in属性的6个取值

in取值                 作用

SourceGraphic 该关键词表示图形元素自身将作为<filter>原语的原始输入

SourceAlpha 该关键词表示图形元素自身将作为〈filter>原语的原始输入。SourceAlpha与SourceGraphic具有相同的规则除了SourceAlpha只使用元素的非透明部分

Backgroundlmage与 SourceGraphic类似，但可在背景上使用。需要显式设置BackgroundAlpha与SourceAlpha类似，但可在背景上使用。需要显式设置

FillPaint 将其放置在无限平面上一样使用填充油漆

StrokePaint 将其放在无限平面上一样使用描边绘画

feBlend滤镜mode属性的模式：

normal — 正常

multiply — 正片叠底

screen — 滤色

darken — 变暗

lighten— 变亮

SVG渐变

线性渐变

<svg>
    <defs>
        <!-- 创建一个线性渐变 -->
        <linearGradient id="linear" x1="0%" y1="0%" x2="70%" y2="0%" spreadMethod="">
        <!-- 开始位置 -->
        <stop offset="0%" stop-color="blue" stop-opacity="0.5" />
        <!-- 结束位置 -->
        <stop offset="100%" stop-color="orange" stop-opacity="1" />
    </linearGradient>
    </defs>
    <!-- 方块 -->
    <rect x="100" y="100" width="200" height="100" fill="url(#linear)" />
</svg>

效果

 

如果需要垂直方向渐变，则修改x2=0%,y2=百分比。

径向渐变

<svg>
    <defs>
        <!--创建径向渐变-->
        <radialGradient id="radia" cx="50%" cy="50%" fx="50%" fy="50%" r="30%">
            <!-- 开始位置 -->
            <stop offset="30%" stop-color="blue" stop-opacity="0.5" />
            <!-- 结束位置 -->
            <stop offset="100%" stop-color="orange" stop-opacity="1" />
        </radialGradient>
    </defs>
    <circle cx="100" cy="100" r="50" fill="url(#radia)" />
</svg>

效果

 

部分渐变属性

fill: url(#id名)通过id值绑定上渐变色

cx/cy：表示渐变颜色的中心点位置

r：表示颜色渐变的范围

fx/fy：表示渐变颜色的焦点坐标

offset:   开始/结束位置建议使用百分比

stop-opacity: 渐变颜色的不透明度

如需要多种颜色渐变则直接添加<stop>标签设置百分比和颜色即可。