SVG阴影、渐变、滤镜

一、理解SVG阴影

1、<defs>和<filter>

所有Internet SVG滤镜都在<defs>元素中定义。

<defs>元素是定义的缩写。包含特殊元素（例如滤镜）的定义。

<filter>元素具有必需的id属性，用于标识滤镜。图形然后指向要使用的滤镜。

2、<feOffset>

<feOffset>元素是用于创建阴影效果。我们的想法是采取一个SVG图形（图像或元素）并移动它在xy平面上一点儿。

偏移一个矩形

<svg>
  <defs>
    <filter id="f1" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
      <feBlend in="SourceGraphic" in2="offOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f1)" />
</svg>

• <filter>元素id属性定义一个滤镜的唯一名称
• <rect>元素的滤镜属性用来把元素链接到"f1"滤镜
• in = "SourceGraphic"指的是模糊效果要应用于整个图片

3、<feGaussianBlur>

• 使用 <feGaussianBlur>将偏移出来的矩形模糊化
• <feGaussianBlur>元素的stdDeviation属性定义了模糊量

<svg>
  <defs>
    <filter id="f1" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" />
</svg>

二、SVG滤镜

Svg滤镜包括

• feBlend：与图像相结合的滤镜
• feColorMatrix：用于彩色滤光片转换
• feComponentTransfer
• feComposite
• feConvolveMatrix
• feDiffuseLighting
• feDisplacementMap
• feFlood
• feGaussianBlur：模糊滤镜
• feImage
• feMerge：多滤镜叠加滤镜
• feMorphology
• feOffset：过滤阴影
• feSpecularLighting
• feTile
• feTurbulence
• feDistantLight：用于照明过滤
• fePointLight：用于照明过滤
• FeSpotLight：用于照明过滤

• 滤镜的属性

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

in属性的6个取值 

in取值         作用

• SourceGraphic    该关键词表示图形元素自身将作为<filter>原语的原始输入
• SourceAlpha      该关键词表示图形元素自身将作为〈filter>原语的原始输入。SourceAlpha与SourceGraphic具有相同的规则除了SourceAlpha只使用元素的非透明部分
• Backgroundlmage与 SourceGraphic类似，但可在背景上使用。需要显式设置BackgroundAlpha与SourceAlpha类似，但可在背景上使用。需要显式设置
• FillPaint           将其放置在无限平面上一样使用填充油漆
• StrokePaint        将其放在无限平面上一样使用描边绘画

feBlend滤镜的模式

• normal — 正常
• multiply — 正片叠底
• screen — 滤色
• darken — 变暗
• lighten— 变亮

• <feColorMatrix>过滤器是用来转换偏移的图像使之更接近黑色的颜色。

<svg>
  <defs>
    <filter id="f1" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
      <feColorMatrix result="matrixOut" in="offOut" type="matrix"
      values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" />
      <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f1)" />
</svg>

三、SVG渐变

1、了解SVG渐变

渐变是一种从一种颜色到另一种颜色的平滑过渡，另外，可以把多个颜色的过渡到同一个元素上。

SVG渐变主要有两种类型：

• Linear线性渐变
• Radial径向渐变

2、SVG线性渐变 <linearGradient>

<linearGradient>元素用于定义线性渐变。
<1inearGradient>元素必须嵌套在<defs> 标记内; <defs> 标签是定义的缩写，包含特殊元素(例如渐变)的定义。

线性渐变可以定义为水平，垂直或角度渐变:

• 当y1和y2相等且x1和x2不同时，将创建水平渐变
• 当x1和x2相等且y1和y2不同时，将创建垂自渐变

当x1和x2不同且y1和y2不同时，将创建角度渐变

<svg width="1000" height="1000">
        <defs>
            <!-- 线性渐变 -->
            <linearGradient id="linear" x1="0%" y1="10%" x2="0%" y2="100%">
                <!-- 设置渐变色,使用stop标签 -->
                <stop offset="20%" stop-color="pink"></stop>
                <stop offset="100%" stop-color="#0ff"></stop>
            </linearGradient>
            <linearGradient id="one" x1="0%" y1="0%" x2="100%" y2="0%">
                <!-- 设置渐变色,使用stop标签 -->
                <stop offset="20%" stop-color="pink"></stop>
                <stop offset="100%" stop-color="#0ff"></stop>
            </linearGradient>
        </defs>
        <rect x="0" y="0" width="200" height="100" fill="url(#linear)">
        </rect>
        <rect x="0" y="100" width="200" height="100" fill="url(#one)">
        </rect>
        <text x="200" y="100" font-size="50" fill="url(#linear)">字体线性渐变--垂直</text>
        <text x="200" y="200" font-size="50" fill="url(#one)">字体线性渐变--水平</text>
    </svg>

3、径向渐变

 <svg width="1000" height="1000">
        <defs>
            <!-- 径向渐变 -->
            <radialGradient id="two" cx="50%" cy="50%" r="80%" fx="50%" fy="50%">
                <stop offset="20%" stop-color="pink"></stop>
                <stop offset="100%" stop-color="#0ff"></stop>
            </radialGradient>
        </defs>
        <rect x="0" y="200" width="200" height="100" fill="url(#two)">
        </rect>
        <text x="200" y="300" font-size="50" fill="url(#two)">字体径向渐变</text>
    </svg>