A method for implementing a glow effect of SVG using multiple filters

Abstract

The present invention discloses a method for implementing a glow effect of SVG using multiple filters. The present invention can well solve the problem that the glow effect of svg elements cannot be simply achieved using CSS properties, and can be combined with animations, pictures, etc. as needed to make the overall effect of the website more cool.

Description

Technical Field

[0001] The present invention relates to the technical field of browsers, and in particular, to a method for implementing a glow effect of SVG using multiple filters. Background Art

[0002] For text in a browser or ordinary elements such as div or span, when implementing a glow effect, CSS properties such as box-shadow or text-shadow can be used. Currently, when a browser displays a glow effect for an svg element, using CSS properties such as box-shadow or text-shadow is ineffective. Therefore, the prior art has deficiencies and needs improvement. Summary of the Invention

[0003] The technical problem to be solved by the present invention is: to provide a method for implementing a glow effect of SVG using multiple filters so that a browser can display a glow effect for an svg element.

[0004] The technical solution of the present invention is as follows: A method for implementing a glow effect of SVG using multiple filters is provided, based on the filter element of the defs element of the svg element of the browser, and includes the following steps.

[0005] S1: Define several Gaussian blur filters. The original input attribute of each Gaussian blur filter is set to SourceGraphic, which means using the graphic itself as the original input of the filter primitive. The blur amount attribute of each Gaussian blur filter is set to several unequal integer values respectively within different Gaussian blur filters. Different filter assignment names blur-N are set for different Gaussian blur filters using the filter assignment name attribute. Here, N in blur-N is a natural number.

[0006] S2: Use the merge filter feMerge. Through its child element feMergeNode, take all Gaussian blur filters except the one with the smallest blur amount and put them into the filter original input attribute, and then give them back to the merge filter for merging. After merging, set a filter assignment name blur-merged.

[0007] S3: Use the RGBA color conversion matrix filter. Set the original input property of the matrix filter to blur-merged, set the type property type to matrix, and set the matrix values values of the matrix filter; Set a filter assignment name color-blur. The matrix filter is a 4*5 matrix, and the values of the matrix are between -255 and 255. The color matrix filter separates each source pixel into its red, green, blue, and Alpha components, represented by srcR, srcG, srcB, and srcA respectively. To calculate the result of each channel among the four channels, the value of each pixel in the image can be multiplied by the value in the conversion matrix. The color matrix filter recombines the color components into a single pixel and writes out the result.

[0008] S4: Use the merge filter again to merge the Gaussian blur filter with the smallest previous blur value, the color-blur filter, and the original input property SourceGraphic of the graphic itself. The Gaussian blur filter with the smallest blur value is the white light filter.

[0009] S5: Set the attribute id value of the filter element to color-glow as the glow filter after export and apply it to the required svg element.

[0010] Further, the color in color-blur and color-glow is the color actually required.

[0011] Adopting the above solution, the present invention provides a method for implementing the glow effect of SVG using multiple filters, which can well solve the problem that the glow effect of svg elements cannot be simply achieved using CSS properties, and can be combined with animations, pictures, etc. as needed to make the overall effect of the website more cool. Brief Description of the Drawings

[0012] Figure 1 is the flowchart of the method of the present invention;

[0013] Figure 2 is the effect diagram of an embodiment of the present invention. Detailed Description of the Embodiment

[0014] The present invention will be described in detail below with reference to the accompanying drawings and specific embodiments.

[0015] Please refer to Figure 1 and Figure 2 , this embodiment provides a method for implementing the glow effect of SVG using multiple filters, based on the filter element of the defs element of the svg element in the browser, including the following steps.

[0016] S1: Define several Gaussian blur filters. The original input attribute of each Gaussian blur filter is set to SourceGraphic, which means using the graphic itself as the original input of the filter primitive. The blur amount attribute of each Gaussian blur filter is set to several unequal integer values respectively. Use the filter assignment name attribute to set different filter assignment names blur-N for different Gaussian blur filters. Here, N in blur-N is a natural number.

[0017] S2: Use the feMerge filter. Through its child element feMergeNode, take all Gaussian blur filters except the one with the smallest blur amount and put them into the filter primitive input attribute, and then give them back to the feMerge filter for merging. After merging, set a filter assignment name blur-merged.

[0018] S3: Use the RGBA color conversion matrix filter. Set the matrix filter primitive input attribute to blur-merged, set the type attribute type to matrix, and set the matrix values values of the matrix filter. Set a filter assignment name color-blur. The matrix filter is a 4*5 matrix, and the values in the matrix are between -255 and 255.

[0019] In this embodiment, the matrix values

[0020] The matrix values in this embodiment have the effect of being bluish, medium green, and weakly red, and can be set with different matrix values according to actual needs.

[0021] S4: Use the feMerge filter again to merge the Gaussian blur filter with the smallest blur value before, the color-blur filter, and the original input attribute SourceGraphic of the graphic itself. The Gaussian blur filter with the smallest blur value is the white light filter.

[0022] S5: Set the attribute id value of the filter element to color-glow, which is used as the exported glow filter and applied to the required svg element.

[0023] In this embodiment, color in color-blur and color-glow is the color required in practice. In this embodiment, color is blue.

[0024] In summary, the present invention provides a method for implementing the glow effect of SVG using multiple filters, which can well solve the problem that the glow effect of svg elements cannot be simply achieved using CSS attributes, and can be combined with animations, pictures, etc. as needed to make the overall website effect more cool.

[0025] The above are only the preferred embodiments of the present invention and are not intended to limit the present invention. Any modifications, equivalent replacements, improvements, etc. made within the spirit and principle of the present invention shall be included within the protection scope of the present invention.

Claims

1. A method for implementing the glow effect of SVG using multiple filters, characterized in that, The filter element of the defs element of the svg element based on the browser includes the following steps: S1: Define several Gaussian blur filters. The original input attribute of the Gaussian blur filter is set to SourceGraphic, which means using the graphic itself as the original input of the filter element. The blur amount attribute of the Gaussian blur filter is set to several unequal integer values in different Gaussian blur filters. Use the filter assignment name attribute to set different filter assignment names blur-N for different Gaussian blur filters; S2: Use the merge filter feMerge. Through its child element feMergeNode, take all Gaussian blur filters except the one with the smallest blur amount and put them into the filter original input attribute, and give them back to the merge filter for merging. After merging, set a filter assignment name blur-merged; S3: Use the RGBA color conversion matrix filter. Set the matrix filter original input attribute to blur-merged, set the type attribute type to matrix, and set the matrix values values of the matrix filter. Set a filter assignment name color-blur; S4: Use the merge filter again to merge the Gaussian blur filter with the smallest blur amount before, the color-blur filter, and the original input attribute SourceGraphic of the graphic itself; S5: Set the attribute id value of the filter element to color-glow as the exported glow filter and apply it to the required svg element; The color in color-blur and color-glow is the actual required color.

2. The method for implementing the glow effect of SVG using multiple filters according to claim 1, wherein The Gaussian blur filter with the smallest blur amount is the white light filter.

3. A method for implementing the glow effect of SVG using multiple filters according to claim 1, characterized in that, N in blur-N is a natural number.

4. A method for implementing the glow effect of SVG using multiple filters according to claim 1, characterized in that, The matrix filter is a 4*5 matrix, and the values of the matrix are between -255 and 255.

Images