Shulou(Shulou.com)06/03 Report--

HTML5 SVG filter definition and how to use, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain for you in detail, people with this need can come to learn, I hope you can gain something.

The filter is arguably the most powerful feature of SVG, allowing you to add filter effects to graphics (graphic elements and container elements) that are unique to a variety of professional software. This makes it easy to generate and modify images on the client side. And the filter does not destroy the structure of the original document, so it is also very maintainable.

The filter is defined by the filter element: when you need to use it, add a filter attribute to the graph or container that needs the filter effect, and reference the relevant filter.

The filter element contains many filter atomic operations; each atomic operation performs a basic graphical operation on the incoming object and produces graphical output. The result of most atomic operations is basically a RGBA image. The input of each atomic operation can be either the source graph or the result of other atomic operations. So the process of referencing the filter effect is to apply the relevant filter atomic operation to the source image, and finally generate a new shape and render it.

When you use the filter attribute on a container (such as a g element), the filter effect is applied to all elements in the container. However, the elements in the container are not rendered directly to the screen, but are temporarily stored. The graphics command is then executed as part of the process of dealing with the referenced filter element, which is then rendered. This is specified by using SourceGraphic and SourceAlpha. The third scenario in the second example below demonstrates this effect.

Some filter effects produce undefined pixels that are treated as transparent.

Let's take a look at an example:

The code is as follows:

Example of SVG filter effect

Use a variety of filter effects to achieve a pair of graphics 3D lighting effect.

SVG

Note: there may be some differences in other browsers.

This filter uses six effects, in turn (the single-step effect is shown in the image above:):

FeGaussianBlur: this step is Gaussian blurring; the input to the special effect is the transparency value of the source image, and the output is stored in the temporary buffer blur. The blur value is used as input to the following feOffset and feSpecularLighting.

FeOffset: this step is to pan the image; the input to the effect is the blur generated in the previous step to generate a new cache offsetBlur.

FeSpecularLighting: this step is to light the surface of the picture. The input is the blur generated in the first step, and the output is stored in the new cache specOut.

FeComposite twice: these two steps combine different cache layers.

FeMerge: this step is to merge different layers. This step is usually the last step, merging the cached layers to generate the final image, and render the rendering. Although this step can be done with multiple feComposite special effects, it is still not very convenient.

Filter element and filter effect area

The filter effect area refers to the area where the filter effect works. The size of this area is defined by the following attributes of the filter element:

FilterUnits = "userSpaceOnUse | objectBoundingBox"

This property defines the coordinate space used by xdepartment and height. Like other Unit-related properties, this property has two values: userSpaceOnUse and objectBoundingBox (the default).

UserSpaceOnUse represents the user coordinate system that uses the element that references the filter element.

ObjectBoundingBox means to use the percentage of the bounding box that references the filter element as the value range.

X,y,width,height

These properties define the rectangular area where the filter works. The filter effect will not be applied to points beyond this area. The default value of xforme y is-10% and the default value of height is 120%.

FilterRes

This property defines the size of the intermediate cache area, so it also defines the quality of the cached image. In general, you do not need to provide this value, the browser will choose the appropriate value. In general, the filter effect area should be defined as one-to-one correspondence between the points and points in the background, which will bring some efficiency advantages.

In addition to these attributes, the following attributes of the filter element are also important:

PrimitiveUnits = "userSpaceOnUse | objectBoundingBox"

This property defines the coordinate space used by the coordinates and length in each atomic operation, and the values of this property are also userSpaceOnUse and objectBoundingBox. Except that the default value is userSpaceOnUse.

Xlink:href = ""

This attribute is used to reference other filter elements in the current filter element.

It is worth noting that the filter element inherits only the attributes of its parent node, not the attributes of the element that references the filter element.

Filter overview

The various filter atomic operations will not be detailed, and you can refer to the official documentation when needed. Let's take a look at the commonalities of these operations. Except for the "in" attribute, the other properties below are available for all atomic operations.

X,y,width,height

Needless to say, these attributes define the region where the filter atoms act, so it might as well be called the "filter mirror region". These attributes are limited by the scope of the filter element, and by default, the values are 0Magne0100% Person100% respectively. The region of action of these atoms exceeds that of the filter element does not work.

Result

Stores the results of this step. After result is specified, other subsequent operations of the same filter element can use in to specify it as input. This can be seen in the example above. If this value is omitted, it can only be used as an implicit input for the next operation immediately following. Note that if the next operation immediately after that has already specified the input with in, the input specified by in will prevail.

In

Represents the input for this step. If you omit the in attribute, the result of the previous step will be used as the input for this step by default, and "SourceGraphic" will be used as the value if you omit the in of the first step (see description below). The in property can refer to the value stored in the previous result, or you can specify the following six special values:

SourceGraphic: this value represents the use of the current graphical element as input to the operation.

SourceAlpha: this value means that the alpha value of the current graphic element is used as input to the operation.

BackgroundImage: this value represents the use of the current background screenshot as input to the operation.

BackgroundAlpha: this value means that the alpha value of the current background screenshot is used as the input to the operation.

FillPaint: this value uses the value of the fill attribute of the current graphic element as input to the operation.

StrokePaint: this value uses the value of the stroke attribute of the current graphic element as input to the operation.

Of these values, BackgroundImage and BackgroundAlpha may be difficult to understand, so let's focus on these two values.

Access background screenshot

In general, we can directly use the background screenshot of the element referencing the filter element as the source image of the filter effect. The values that represent this input are BackgroundImage and BackgroundAlpha, the former containing the color and alpha value, and the latter containing only the alpha value. To support this use, you also need to explicitly turn on this feature on the element that references the filter element, which requires setting the element's enable-background attribute.

Enable-background = "accumulate | new [] | inherit"

This attribute can only be used with container elements, which defines how to take a screenshot of the background.

The new value represents that the child elements of the container are allowed to access the background screenshot of the container, and the child elements of the container are rendered to the background and on the device.

Accumulate is the default, and its effect depends on the context: if the parent container element uses enable-background:new, then all graphical elements of the container participate in the rendering of the background. Otherwise, the parent container is not ready to take a background screenshot, and the graphical element of the element is displayed only on the device.

The following example demonstrates the effect of these values:

The code is as follows:

An example of using background screenshots

The following examples explain the use of background screenshots in different situations

This filter discards the source image and uses a background screenshot instead

This filter effect combines both the background screenshot and the picture of the current element.

The first one is the effect without a filter.

The second is to use the filter effect on the container.

The third picture is to use the filter effect on the internal container, which is different from the second image.

The fourth is the use of filter effects on graphic elements.

The fifth picture is to use different filter effects on graphic elements.

The effect images are as follows (the first row is the final effect, and the second row is the filter effect):

This example consists of five parts:

1. The pictures in the first group do not use any filter effects.

two。 The second group uses the same image, but turns on the effect of using the background.

3. The third group uses the same image, but uses a filter effect in the internal container.

4. The fourth group uses a filter effect on the elements of the content container.

5. The last group uses the same filter effect as the fourth group and merges the source image to produce the effect.

The concept of filter is actually very simple, but the code for each effect looks more complex. In fact, it will be very clear for us to try it. However, as different browsers have different levels of support for SVG, you should try the specific effect before using it.

Is it helpful for you to read the above content? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.