svg基础（七）滤镜-feflood,feDisplacementMap 位置替换滤镜

1 feflood

此过滤器创建一个矩形，其中填充了指定的的颜色，应用了不透明度值。

1.1 语法

<feFlood x="" y="" width="" height="" flood-color="" flood-opacity=""/>

1.2 属性

• x，y -定义用户坐标系x轴和y轴坐标
• width-宽度
• height-高度
• flood-color-颜色
• flood-opacity-不透明度

1.3 示例

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
    <defs>
      <filter id="floodFilter" filterUnits="userSpaceOnUse">
        <feFlood x="100" y="100" width="100" height="100"
            flood-color="orange" flood-opacity="0.8"/>
      filter>
    defs>
  
    <use filter="url(#floodFilter)"/>
  svg>

2 # feDisplacementMap 位置替换滤镜

此过滤器改变元素和图形的像素位置，形成一个新的图形（比如添加水波纹效果）。
根据设定的通道颜色对原图的x, y坐标进行偏移

公式：P’(x,y) ← P( x + scale * (XC(x,y) - 0.5), y + scale * (YC(x,y) - 0.5))

• P’(x,y)指的是转换之后的x, y坐标
• x + scale * (XC(x,y) - 0.5), y + scale * (YC(x,y) - 0.5)指的是具体的转换规则。
• XC(x,y)表示当前x,y坐标像素点其X轴方向上设置的对应通道的计算值，范围是0~1。
• YC(x,y)表示当前x,y坐标像素点其Y轴方向上设置的对应通道的计算值，范围是0~1。
• -0.5是偏移值，因此XC(x,y) - 0.5范围是-0.5~0.5，YC(x,y) - 0.5范围也是-0.5~0.5。
• scale表示计算后的偏移值相乘的比例，scale越大，则偏移越大。

2.1 语法

    <feDisplacementMap xChannelSelector="" yChannelSelector="" color-interpolation-filters="" in="" in2="" scale="">feDisplacementMap>

2.2 属性

• xChannelSelector-对应XC(x,y)，表示X轴坐标使用的是哪个颜色通道进行位置偏移(R、G、B、A中的一个，默认是A)
• yChannelSelector-对应YC(x,y)，表示y轴坐标使用的是哪个颜色通道进行位置偏移
• color-interpolation-filters-表示滤镜对颜色进行计算时候采用的颜色模式类型。分为linearRGB（默认值）和sRGB
• in-表示输入的原始图形
• in2-表示用来映射的图形
• scale-缩放比例，可正可负，默认是0。通常使用正数值处理，值越大，偏移越大

2.3 示例

 <svg width="200" height="200"> 
  <filter id="displacementFilter"> 
      <feTurbulence type="turbulence" 
          baseFrequency="1" 
          numOctaves="2" 
          result="turbulence" /> 
      <feDisplacementMap in2="turbulence" 
          in="SourceGraphic" scale="50" 
          xChannelSelector="R"
          yChannelSelector="B" /> 
  filter> 
  <circle cx="100" cy="100" r="100" 
      stroke="green"
      filter="url(#displacementFilter)" /> 
svg>