preface

The last article introduced what a filter is, a filter container, and the most common Gaussian filter and its basic applications. This article will introduce several commonly used filters feImage, feFlood, feOffset, feDropShadow and feColorMatrix. The use of each filter is illustrated with examples.

The articles

Set foot on SVG | construct comprehensive functions and characteristics of SVG – based

SVG – Filter part 1

FeImage takes the image data as output

The feImage filter takes the image data from an external source and provides pixel data as output (meaning that if the external source is an SVG image, the image will be rasterized).

Properties:

Xlink :href: address of the image preserveAspectRatio: display mode of the zoom of the image

Example: Introduce external images and external SVG images

<svg width="200" height="200" viewBox="0 0 200 200">
  <defs>
    <filter id="image">
      <! -- feImage import external image -->
      <feImage xlink:href=".. /.. /image/VIP.png"/>
    </filter>
    <filter id="image2">
      <! -- feImage introduces external SVG -->
      <feImage xlink:href=".. /.. /static/PPT.svg#ppt"/>
    </filter>
  </defs>
  <rect x="10" y="10" width="80" height="80" fill="green" filter="url(#image)" />
  <rect x="10" y="100" width="80" height="80" fill="green" filter="url(#image2)" />
</svg>
Copy the code

The difference is small, but it is important to note that introducing SVG requires specifying an SVG container ID

PreserveAspectRatio Displays the zoom mode of an image

This property is used to tell a container how to display an image or content if the container is not large enough to hold the desired content.

PreserveAspectRatio is a conformance property that needs to specify alignment and scaling modes

alignment

  • none
  • xMinYMin
  • xMidYMin
  • xMaxYMin
  • xMinYMid
  • XMidYMid (default)
  • xMaxYMid
  • xMinYMax
  • xMidYMax
  • xMaxYMax

It looks like a lot, but it’s not that hard, because it’s just specifying the position of the image. It’s very simple to put it another way

  • None: The image will be stretched to the container size without uniform scaling
  • XMin: left-align horizontally
  • XMid: horizontally centered
  • XMax: align horizontally right
  • YMin: align the top vertically
  • YMid: center vertically
  • YMax: Align the bottom vertically

Just a couple of examples

XMinYMin: horizontally aligned to the left, vertically aligned to the top. So the image will be in the upper left corner xMaxYMid: horizontally aligned to the right and vertically centered. So the image will be centered vertically on the right

Zoom mode

  • Meet: The display content will first occupy the short side for equal scale, and the display content will be as complete as possible.
  • Slice: The display portion will take up the full length of the long edge for proportional scaling. Display contents may not be fully displayed and may exceed the container

Show and contrast all the cases

There are many specific codes, which will be unified and open source after finishing the whole series. Save it for the right person.

FeFlood specifies the fill of the filter

Properties:

  • Flood-color: indicates the filling color
  • Flood -opacity: opacity of filling

Simple use:

  .border{
    display: inline-block;
    border: 1px solid # 000;
  }
  .img {
    display: block;
    width: 100px;
    height: 100px;
  }
  .filter-svg{
    filter: url("#MyFilter");
  }
Copy the code
<svg width="100" height="100" viewBox="0 0 100 100">
  <defs>
    <filter id="MyFilter">
      <feFlood x="0" y="0" flood-color="green" flood-opacity="0.5"/>
    </filter>
  </defs>
  <! Fill the rectangle with the filter -->
  <rect x="10" y="10" width="80" height="80" filter="url(#MyFilter)" />
</svg>
<! The fill image of the filter replaces the original image content -->
<img src=".. /.. /image/VIP.png" class="img filter-svg" alt="" />
Copy the code

FeOffset specifies the offset of the input image

Properties:

  • In: indicates the data input source
  • Dx: offset in the x direction
  • Dy: offset in the y direction

Simple to use

<svg class="border" width="200" height="200" viewBox="0 0 200 200" style="display: none;">
  <defs>
    <filter id="MyFilter" >
      <feOffset in="SourceGraphic" dx="20" dy="20" />
    </filter>
    <filter id="MyFilter2" >
      <! SourceGraphic -->
      <feOffset dx="20" dy="20" />
    </filter>
  </defs>
</svg>
<div class="border">
  <img src=".. /.. /image/VIP.png" alt="" style="filter: url(#MyFilter);">
</div>
<div class="border">
  <img src=".. /.. /image/VIP.png" alt="" style="filter: url(#MyFilter2);">
</div>
Copy the code

FeDropShadow Image projection

This filter projects the input image. So the transparent ones don’t get projected. The result is the same as the drop-shadow in the CSS filter.

Properties:

  • Dx: This property defines the x offset of the projection.
  • Dy: This property defines the y offset of the projection.
  • StdDeviation: Define the standard deviation of fuzzy operation, the larger the value, the more fuzzy. You can hardly see it above 20
  • Flood-color: the color of the projection (exclusive property of feFlood)
  • Opacity: opacity of projection (exclusive property of feFlood, also available here)

Simple to use

<svg width="100" height="100" viewBox="0 0 100 100">
  <defs>
    <filter id="dropShadow">
      <feDropShadow  dx="8" dy="8" flood-color="red" flood-opacity="0.5" stdDeviation="2" />
    </filter>
  </defs>
</svg>
<img src=".. /.. /image/ virgo.png" class="img filter-svg" alt="" />
Copy the code

FeColorMatrix image matrix transformation

The filter transforms colors based on a transformation matrix. The color value of each pixel (a vector denoted by red, green, blue, transparency) is a new color calculated by matrix multiplation.

Properties:

  • Type: type. There are default matrices for specific types to choose from, or you can write your own matrix functions via matrix
  • Values: values. The values corresponding to different types are inconsistent

type:saturate

Change the saturation of the image to the same effect as Filter: saturate

Value: The standard value ranges from 0 to 1. Saturation stack increments above 1

Example:

<svg>
  <defs>
    <filter id="saturate">
      <feColorMatrix id="saturateMatrix" in="SourceGraphic" type="saturate" values="0.2"/>
    </filter>
  </defs>
</svg>

<h4>saturate</h4>
<img class="img saturate"  src=".. /.. /image/VIP.png" alt="">Between 0 and 1<input id="saturateInput" value="0.2" onchange="change(event,'saturate')" type="text">
Copy the code

Modify the values attribute.

  function change(e,type,_value){
    const value = e.target.value;
    const target = document.getElementById(type + 'Matrix');
    target.attributes.values.value = _value || value;
  }
Copy the code

Set a filter for the image (the following examples are also used, so I will not list them all)

  .img {
    display: block;
    width: 200px;
    height: 250px;
  }
  .saturate{
    filter: url("#saturate");
  }
Copy the code

type:hueRotate

The color ring rotation effect is the same as filter: hue-rotate.

Value: indicates the Angle value. Again, if you go over 360 degrees, you start all over again.

Example:

<filter id="hueRotate">
  <feColorMatrix id="hueRotateMatrix" in="SourceGraphic" type="hueRotate" values="100"/>
</filter>

<h4>hueRotate</h4>
<img class="img hueRotate"  src=".. /.. /image/VIP.png" alt="">Angle value<input id="hueRotateInput" value="100" onchange="change(event,'hueRotate')" type="text">
Copy the code

type:luminanceToAlpha

Alpha brightness, no value

example

<filter id="luminanceToAlpha">
 <feColorMatrix in="SourceGraphic" type="luminanceToAlpha"/>
</filter>

<h4>luminanceToAlpha</h4>
<img class="img luminanceToAlpha"  src=".. /.. /image/VIP.png" alt="">
Copy the code

type:matrix

Color matrix (estimate some art knowledge), pixel level drawing image

Value: indicates the matrix value. It’s a 4 by 5 matrix

R G B A 1
1 0 0 0 0 => R = 1*R + 0*G + 0*B + 0*A + 0
0 1 0 0 0 => G = 0*R + 1*G + 0*B + 0*A + 0
0 0 1 0 0 => B = 0*R + 0*G + 1*B + 0*A + 0
0 0 0 1 0 => A = 0*R + 0*G + 0*B + 1*A + 0

Matrix can implement the effects of feColorMatrix other types. At the same time, you can set your own matrix to achieve a richer effect.

The original like matrix

<filter id="matrix">
  <feColorMatrix in="SourceGraphic" type="matrix" 
    values="1 0 0 0 0 0 0 1 0 0 0 0 0 0 1 0 0 0 0 0 0 1 0" 
  />
<div>The original like matrix</div>
<img class="img matrix"  src=".. /.. /image/VIP.png" alt="">
Copy the code

transparent

<filter id="matrix2">
  <feColorMatrix in="SourceGraphic" type="matrix" 
    values="1 0 0 0 0 0 0 1 0 0 0 0 0 0 1 0 0 0 0 0 0 2 0" 
  />
</filter>
<div>transparent</div>
<img class="img matrix2"  src=".. /.. /image/VIP.png" alt="">
Copy the code

Monochrome enhancement

<filter id="matrix3">
  <feColorMatrix in="SourceGraphic" type="matrix" 
    values="1 0 0 0.5 0 1 0 0 0 0 0 0 0 1 0 0 0 0 0 0 1 0" 
  />
</filter>
<div>Monochrome enhancement (red in this example)</div>
<img class="img matrix3"  src=".. /.. /image/VIP.png" alt="">
Copy the code

dark

<filter id="matrix4">
  <feColorMatrix in="SourceGraphic" type="matrix" 
    values=".2 0 0 0 0 0 0 2 0 0 0 0 0 1 0" 
  />
</filter>
<div>darker</div>
<img class="img matrix4"  src=".. /.. /image/VIP.png" alt="">
Copy the code

grey

<filter id="matrix5">
  <! The same value of the 3 x 3 small matrix in front of the matrix ensures that the final output value is the same color. -->
  <! But the closer the output value is to 1, the brighter the image gets. The reason is that the last RGB position is much larger than 1 so the image is too white to show anything. So I gave a control value of -0.5.
  <feColorMatrix in="SourceGraphic" type="matrix" 
    values=".5.50 0-0.5. 5.50 0-0.5. 5.50 0-0.5. 5.50 0-0.5. 
  />
  <! -- values="1 1 1 0 0 1 1 1 0 0 1 1 1 0 0 0 0 0 1 0" -->
</filter>

<div>Gray => RGB image of the same value becomes gray</div>
<img class="img matrix5"  src=".. /.. /image/VIP.png" alt="">
Copy the code

Color enhancement

<filter id="matrix6">
  <feColorMatrix in="SourceGraphic" type="matrix" 
    values="1.2 0 0 0 0 0 0 1.2 0 0 0 0 0 0 0 1 0" 
  />
</filter>
<div>Color enhancement</div>
<img class="img matrix6"  src=".. /.. /image/VIP.png" alt="">
Copy the code

Color change

<filter id="matrix7">
  <feColorMatrix id="colorMatrix" in="SourceGraphic" type="matrix" 
    values="0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 1 0" 
  />
</filter>

<div>Color change</div>
<img class="img matrix7"  src=".. /.. /image/ virgo.png" alt="">
<label>Red:<input type="radio" checked="checked" name="color" value="1" onchange="change(event,'color','0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0')"/></label>
<label>Green:<input type="radio" name="color" value="2" onchange="change(event,'color','0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 1 0')"/></label>
<label>Blue:<input type="radio" name="color" value="3" onchange="change(event,'color','0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 1 0')"/></label>
Copy the code

The last

The resources

Source: MDN