CN118568372A - Front-end processing method, device and equipment for implementing theme switching based on SVG - Google Patents

Abstract

The present invention discloses a front-end processing method, device and equipment for implementing theme switching based on SVG, and relates to the technical field of web page processing. The method comprises obtaining a website to be switched to a theme, and classifying target colors in the obtained website to obtain conventional colors and picture colors; controlling the switching of target colors based on SVG filters, processing conventional colors to obtain color effects with filters; dividing pictures into different areas based on SVG cropping functions, and setting SVG filters for different areas to process picture colors to obtain color effects with partition filters; and implementing theme switching of the website to be switched to a theme according to the processing results of conventional colors and picture colors. The present invention can implement theme switching, meet the requirements of picture color switching, and effectively reduce the maintenance cost of maintaining color variables under various themes when switching various themes.

Description

Front-end processing method, device and equipment for implementing theme switching based on SVG

Technical Field

The present application relates to the technical field of web page processing, and in particular to a front-end processing method, device and equipment for implementing theme switching based on SVG.

Background Art

When browsing websites, you will often find that some websites can switch between dark and light modes, and some websites can even provide multiple color themes, which is very cool. When checking the implementation principles of these websites, they can be roughly divided into the following three methods:

The first, and earliest, solution uses the link tag to dynamically introduce CSS (Cascading Style Sheets), and controls different properties of the same class name by changing the CSS reference address to achieve the purpose of switching. The advantage of this solution is that only one style of the current theme can be loaded when it is first opened, which improves the first screen loading speed; however, the disadvantage is that when switching themes, the style files of other themes need to be downloaded additionally, resulting in delays caused by network requests when switching;

The second method is to insert a class name such as dark-theme on the root node element, so that when writing the style, a separate theme configuration of the color variable of the dark-theme mode can be maintained. This solution is a more commonly used solution nowadays. Its advantages are that it can maintain themes of each color separately and can switch in seconds, solving the problem of the first solution requiring additional requests; however, its disadvantages are that, for example, it is necessary to maintain various color configurations of all themes, and it can only switch colors such as color, background color, border color, etc., and cannot solve the display switching of images in various modes.

The third method is to use a third-party library. Here, we take the css-vars-ponyfill (a polyfill library for implementing browser compatibility of CSS variables) skinning solution as an example. It uses pure JS (a programming language) to write the core skinning function and does not rely on CSS preprocessing. It extracts the basic color and converts it into a more semantic business variable color, and then uses JS to change the specific color in accordance with the theme. Its advantage is that it does not rely on CSS preprocessing, but its disadvantage is the same as the second one, which requires the maintenance of the theme configuration of each color, and it also cannot realize the display switching of images under different theme colors.

It can be seen that, for the above-mentioned solutions, although they can provide color switching functions, the corresponding color configurations need to be maintained, which has a certain maintenance cost. In addition, they cannot satisfy the switching display of the same picture under different themes.

Summary of the invention

The present application provides a front-end processing method, device and equipment for implementing theme switching based on SVG, which can realize theme switching and meet the requirements of image color switching, while effectively reducing the maintenance cost of maintaining color variables under various themes when switching between various themes.

In a first aspect, an embodiment of the present application provides a front-end processing method for implementing theme switching based on SVG, and the front-end processing method for implementing theme switching based on SVG includes:

Obtain the website to be switched to, and classify the target colors in the obtained website to obtain regular colors and picture colors;

Based on the SVG filter, the target color is switched and the conventional colors are processed to obtain the color effect with the filter.

Based on the SVG cropping function, the image is divided into different areas, and SVG filters are set for different areas to process the color of the image and obtain a color effect with a partition filter;

According to the processing results of the conventional colors and the picture colors, the theme switching of the website to be switched is realized.

In combination with the first aspect, in one implementation,

The conventional colors include text color, background color, and border color;

The picture color includes picture resource color and background picture color.

In combination with the first aspect, in one implementation, the switching of the target color is controlled based on the SVG filter, and conventional colors are processed to obtain a color effect with a filter, specifically including:

Control the switching of target colors in regular colors based on SVG filters;

Different color effects can be achieved through different filters, so that regular colors can be processed to obtain color effects with filters.

In combination with the first aspect, in one implementation, the image is divided into different regions based on the SVG cropping function, and SVG filters are set for the different regions to process the color of the image to obtain a color effect with a partition filter, specifically including:

Divide the image into different areas based on the SVG cropping function;

Different SVG filters are set for different areas to process the image color and obtain a color effect with a partition filter.

In combination with the first aspect, in one implementation, the method of implementing theme switching of a website to be theme switched according to the processing results of the conventional colors and the picture colors specifically includes:

The theme switching of the website to be switched is achieved according to the color effect result with filter obtained after conventional color processing in the website to be switched and the color effect result with partition filter obtained after color processing of the picture.

In a second aspect, an embodiment of the present application provides a front-end processing device for implementing theme switching based on SVG, wherein the front-end processing device for implementing theme switching based on SVG comprises:

A classification module is used to obtain the website to be switched to a certain theme, and classify the target colors in the obtained website to obtain regular colors and picture colors;

A first processing module is used to control the switching of target colors based on SVG filters, process regular colors, and obtain color effects with filters;

The second processing module is used to divide the image into different areas based on the SVG cropping function, and set SVG filters for the different areas to process the color of the image to obtain a color effect with a partition filter;

The execution module is used to implement theme switching of the website to be switched according to the processing results of the conventional colors and the picture colors.

In conjunction with the second aspect, in one implementation,

The conventional colors include text color, background color, and border color;

The picture color includes picture resource color and background picture color.

In conjunction with the second aspect, in one implementation, the switching of the target color is controlled based on the SVG filter, and conventional colors are processed to obtain a color effect with a filter, specifically including:

Control the switching of target colors in regular colors based on SVG filters;

Different color effects can be achieved through different filters, so that regular colors can be processed to obtain color effects with filters.

In conjunction with the second aspect, in one implementation, the image is divided into different regions based on the SVG cropping function, and SVG filters are set for the different regions to process the color of the image to obtain a color effect with a partition filter, specifically including:

Divide the image into different areas based on the SVG cropping function;

Different SVG filters are set for different areas to process the image color and obtain a color effect with a partition filter.

In a third aspect, an embodiment of the present application provides a front-end processing device for implementing theme switching based on SVG, wherein the front-end processing device for implementing theme switching based on SVG comprises a processor, a memory, and a front-end processing program for implementing theme switching based on SVG stored in the memory and executable by the processor, wherein when the front-end processing program for implementing theme switching based on SVG is executed by the processor, the steps of the front-end processing method for implementing theme switching based on SVG described above are implemented.

The beneficial effects brought by the technical solution provided by the embodiments of the present application include:

By obtaining the website to be switched in theme, and classifying the target colors in the obtained website, conventional colors and picture colors are obtained, and then the switching of the target color is controlled based on the SVG filter, the conventional colors are processed to obtain the color effect with the filter, and then the picture is divided into different areas based on the SVG cropping function, and the SVG filter is set for different areas to process the picture color to obtain the color effect with the partition filter. Finally, according to the processing results of the conventional colors and the picture colors, the theme switching of the website to be switched in theme is realized, and SVG is used to deal with the two scenes of complex colors such as conventional colors and pictures respectively, and finally the theme switching is realized to meet the requirements of picture color switching, and at the same time, the maintenance cost of maintaining the color variables under each theme when switching various themes is effectively reduced.

BRIEF DESCRIPTION OF THE DRAWINGS

FIG1 is a flow chart of a front-end processing method for implementing theme switching based on SVG in the present application;

FIG2 is a schematic diagram of functional modules of a front-end processing device for implementing theme switching based on SVG in the present application;

FIG. 3 is a schematic diagram of the hardware structure of a front-end processing device for implementing theme switching based on SVG in the present application.

DETAILED DESCRIPTION

In order to enable those skilled in the art to better understand the solution of the present application, the technical solution in the embodiments of the present application will be clearly and completely described below in conjunction with the drawings in the embodiments of the present application. Obviously, the described embodiments are only part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of this application.

In order to make the objectives, technical solutions and advantages of the present application more clear, the implementation methods of the present application will be further described in detail below with reference to the accompanying drawings.

In a first aspect, an embodiment of the present application provides a front-end processing method for implementing theme switching based on SVG, using SVG (Scalable Vector Graphics) to deal with two scenarios of conventional colors and complex colors such as pictures, and finally achieving theme switching.

In one embodiment, referring to FIG. 1 , FIG. 1 is a flow chart of a front-end processing method for implementing theme switching based on SVG in the present application. As shown in FIG. 1 , the front-end processing method for implementing theme switching based on SVG includes:

S1: Obtain the website to be switched to a new theme, and classify the target colors in the obtained website to obtain regular colors and picture colors; in this application, regular colors include text color, background color, and border color; picture colors include picture resource color and background picture color.

For a website, the target objects therein include text, background, border, image resources, background images, etc. This application first classifies the target object colors to obtain regular colors and image colors, and then processes the regular colors and image color classifications.

S2: Control the switching of target colors based on SVG filters, process regular colors, and obtain color effects with filters;

Furthermore, in one embodiment, based on the SVG filter, the target color is switched and the conventional color is processed to obtain the color effect with the filter, which specifically includes:

S201: Control switching of target colors in regular colors based on SVG filters;

S202: different color effects are achieved through different filters, so as to process the conventional colors and obtain color effects with filters.

The front-end processing method for implementing theme switching based on SVG in this application mainly utilizes two capabilities of SVG: filter and cropping to achieve the theme switching effect. First, SVG filters are used to control the switching of target colors in conventional colors, and different color effects are achieved through different filters, such as different text colors, background colors or border colors under various themes.

S3: Divide the image into different areas based on the SVG cropping function, and set SVG filters for different areas to process the color of the image to obtain a color effect with a partition filter;

Furthermore, in one embodiment, the image is divided into different regions based on the SVG cropping function, and SVG filters are set for the different regions to process the color of the image to obtain a color effect with a partition filter, specifically including:

S301: Divide the image corresponding to the image color into different areas based on the SVG cropping function;

S302: Setting different SVG filters for different regions to process the color of the image and obtain a color effect with a partition filter.

That is, for the theme switching of the picture, using one filter may not meet the expected effect. This application divides the picture into different areas by using the cropping function of SVG, and then sets different SVG filters for different areas to achieve the corresponding effects of one picture under various themes.

S4: According to the processing results of the conventional colors and the image colors, the theme switching of the website to be switched is realized.

Further, in one embodiment, according to the processing results of the conventional colors and the picture colors, the theme switching of the website to be switched is implemented, specifically including:

The theme switching of the website to be switched is achieved according to the color effect result with filter obtained after conventional color processing in the website to be switched and the color effect result with partition filter obtained after color processing of the picture.

It should be noted that the common practice for switching the color of pictures under different themes is to change the reference address of the picture when switching the theme, and to request the picture file under the corresponding theme each time. However, this application innovatively divides the picture into different areas and sets different filters for different areas to achieve different display effects under multiple theme modes by using only one picture to solve the problem that a single filter cannot achieve the target effect due to the rich colors of the picture.

Secondly, the present application also has certain advantages in terms of maintenance costs, including the following two advantages: First, because SVG is a tag language, ts and JS can be used to dynamically change the internal attributes of SVG. Compared with CSS files maintained separately, it can more conveniently change internal attributes and effects; second, because the switching of various themes in the normal mode means maintaining all color variables under each theme, and SVG can change the filters of various themes through a fixed algorithm. For example, there are 7 existing themes, and each theme needs to have three types of text color, background color, and border color. The normal mode needs to maintain 7 modes with 3 color variables respectively, that is, 21 color variables, and SVG filters can use a fixed algorithm to cover 7 filters on 3 color variables, that is, only 3 inherent color variables and 7 filter attributes with conversion algorithms need to be maintained, thereby greatly reducing maintenance costs.

From the above analysis, it can be seen that this application can solve the current mainstream problem of being unable to switch picture themes on the market, and can also reduce daily development and maintenance costs.

This application uses SVG filters to change colors, including but not limited to text color, background color, border color, etc., to achieve the effect of switching themes; uses SVG filters to change image colors to achieve the effect of switching themes; uses SVG filters + SVG cropping partitions to change image colors to achieve the effect of switching themes; uses SVG filters + SVG cropping partitions to change image colors to achieve the intended purpose.

The front-end processing method for implementing theme switching based on SVG in the embodiment of the present application obtains the website to be switched in theme, and classifies the target colors in the obtained website to obtain regular colors and picture colors, then controls the switching of the target colors based on the SVG filter, processes the regular colors to obtain color effects with filters, then divides the picture into different areas based on the SVG cropping function, and sets SVG filters for different areas to process the picture colors to obtain color effects with partition filters, and finally implements theme switching of the website to be switched in theme based on the processing results of the regular colors and picture colors, uses SVG to deal with two scenarios of complex colors such as regular colors and pictures, respectively, and finally implements theme switching to meet the requirements of picture color switching, while effectively reducing the maintenance cost of maintaining color variables under each theme when switching between various themes.

In a second aspect, an embodiment of the present application further provides a front-end processing device for implementing theme switching based on SVG.

In one embodiment, referring to Figure 2, Figure 2 is a functional module diagram of a front-end processing device for implementing theme switching based on SVG. As shown in Figure 2, the front-end processing device for implementing theme switching based on SVG includes: a classification module, a first processing module, a second processing module, and an execution module.

The classification module is used to obtain the website to be switched in theme, and classify the target colors in the obtained website to obtain regular colors and picture colors; the first processing module is used to control the switching of the target color based on the SVG filter, process the regular colors, and obtain the color effect with the filter; the second processing module is used to divide the picture into different areas based on the SVG cropping function, and set the SVG filter for the different areas to process the picture color to obtain the color effect with the partition filter; the execution module is used to realize the theme switching of the website to be switched in theme according to the processing results of the regular colors and the picture colors.

In this application, conventional colors include text color, background color, and border color; image colors include image resource color and background image color.

In this application, based on the SVG filter, the target color is switched and the conventional color is processed to obtain the color effect with the filter, which specifically includes:

Control the switching of target colors in regular colors based on SVG filters;

Different color effects can be achieved through different filters, so that regular colors can be processed to obtain color effects with filters.

The front-end processing method for implementing theme switching based on SVG in this application mainly utilizes two capabilities of SVG: filter and cropping to achieve the theme switching effect. First, SVG filters are used to control the switching of target colors in conventional colors, and different color effects are achieved through different filters, such as different text colors, background colors or border colors under various themes.

In this application, the image is divided into different areas based on the SVG cropping function, and SVG filters are set for different areas to process the color of the image to obtain a color effect with a partition filter, specifically including:

Divide the image into different areas based on the SVG cropping function;

Different SVG filters are set for different areas to process the image color and obtain a color effect with a partition filter.

That is, for the theme switching of the picture, using one filter may not meet the expected effect. This application divides the picture into different areas by using the cropping function of SVG, and then sets different SVG filters for different areas to achieve the corresponding effects of one picture under various themes.

In this application, according to the processing results of the conventional colors and the picture colors, the theme switching of the website to be switched is realized, which specifically includes:

The theme switching of the website to be switched is achieved according to the color effect result with filter obtained after conventional color processing in the website to be switched and the color effect result with partition filter obtained after color processing of the picture.

In order to solve the problem that a single filter cannot achieve the desired effect due to the rich colors of images, this application innovatively divides the image into different areas, sets different filters for different areas, and achieves different display effects in multiple theme modes using only one image.

The front-end processing device for implementing theme switching based on SVG of the present application obtains the website to be switched in theme, and classifies the target colors in the obtained website to obtain regular colors and picture colors, then controls the switching of the target colors based on the SVG filter, processes the regular colors to obtain color effects with filters, then divides the picture into different areas based on the SVG cropping function, and sets SVG filters for different areas to process the picture colors to obtain color effects with partition filters, and finally implements theme switching of the website to be switched in theme according to the processing results of the regular colors and picture colors, uses SVG to deal with two scenarios of complex colors such as regular colors and pictures respectively, and finally implements theme switching to meet the requirements of picture color switching, while effectively reducing the maintenance cost of maintaining color variables under various themes when switching various themes.

Among them, the functional implementation of each module in the above-mentioned front-end processing device for implementing theme switching based on SVG corresponds to the steps in the above-mentioned front-end processing method embodiment for implementing theme switching based on SVG, and its functions and implementation processes are no longer repeated here.

In a third aspect, an embodiment of the present application provides a front-end processing device for implementing theme switching based on SVG. The front-end processing device for implementing theme switching based on SVG may be a personal computer (PC), a laptop computer, a server, or other device with data processing capabilities.

Referring to Figure 3, Figure 3 is a schematic diagram of the hardware structure of a front-end processing device for implementing theme switching based on SVG involved in the embodiment of the present application. In the embodiment of the present application, the front-end processing device for implementing theme switching based on SVG may include a processor, a memory, a communication interface, and a communication bus.

The communication bus may be of any type and is used to interconnect the processor, the memory, and the communication interface.

The communication interface includes an input/output (I/O) interface, a physical interface, and a logical interface, etc., which are used to interconnect the devices inside the front-end processing device for implementing theme switching based on SVG, and an interface for interconnecting the front-end processing device for implementing theme switching based on SVG with other devices (such as other computing devices or user devices). The physical interface can be an Ethernet interface, an optical fiber interface, an ATM interface, etc.; the user device can be a display, a keyboard, etc.

The memory can be various types of storage media, such as random access memory (RAM), read-only memory (ROM), non-volatile RAM (NVRAM), flash memory, optical storage, hard disk, programmable ROM (PROM), erasable PROM (EPROM), electrically erasable PROM (EEPROM), etc.

The processor may be a general-purpose processor, which may call a front-end processing program based on SVG for implementing theme switching stored in a memory, and execute a front-end processing method based on SVG for implementing theme switching provided in an embodiment of the present application. For example, the general-purpose processor may be a central processing unit (CPU). The method executed when the front-end processing program based on SVG for implementing theme switching is called may refer to the various embodiments of the front-end processing method based on SVG for implementing theme switching in the present application, which will not be described in detail here.

Those skilled in the art will appreciate that the hardware structure shown in FIG. 3 does not constitute a limitation on the present application, and may include more or fewer components than shown in the figure, or a combination of certain components, or a different arrangement of components.

It should be noted that the serial numbers of the above-mentioned embodiments of the present application are only for description and do not represent the advantages or disadvantages of the embodiments.

The terms "including" and "having" and any variations thereof in the specification and claims of this application and the above-mentioned drawings are intended to cover non-exclusive inclusions. For example, a process, method, system, product or device that includes a series of steps or units is not limited to the listed steps or units, but optionally includes steps or units that are not listed, or optionally includes other steps or units inherent to these processes, methods, products or devices. The terms "first", "second" and "third" are used to distinguish different objects, etc., and do not represent a sequence, nor do they limit the "first", "second" and "third" to different types.

In the description of the embodiments of the present application, "exemplary", "for example" or "for example" are used to indicate examples, illustrations or descriptions. Any embodiment or design described as "exemplary", "for example" or "for example" in the embodiments of the present application should not be interpreted as being more preferred or more advantageous than other embodiments or designs. Specifically, the use of words such as "exemplary", "for example" or "for example" is intended to present related concepts in a specific way.

In the description of the embodiments of the present application, unless otherwise specified, “/” means or. For example, A/B can mean A or B. The “and/or” in the text is merely a description of the association relationship of associated objects, indicating that three relationships may exist. For example, A and/or B can mean: A exists alone, A and B exist at the same time, and B exists alone. In addition, in the description of the embodiments of the present application, “multiple” refers to two or more than two.

In some processes described in the embodiments of the present application, multiple operations or steps that appear in a specific order are included, but it should be understood that these operations or steps may not be executed in the order in which they appear in the embodiments of the present application or in parallel, and the sequence number of the operation is only used to distinguish the different operations, and the sequence number itself does not represent any execution order. In addition, these processes may include more or fewer operations, and these operations or steps may be executed in sequence or in parallel, and these operations or steps may be combined.

Through the description of the above implementation methods, those skilled in the art can clearly understand that the above-mentioned embodiment methods can be implemented by means of software plus a necessary general hardware platform, and of course by hardware, but in many cases the former is a better implementation method. Based on such an understanding, the technical solution of the present application, or the part that contributes to the prior art, can be embodied in the form of a software product, which is stored in a storage medium (such as ROM/RAM, magnetic disk, optical disk) as described above, and includes a number of instructions for a terminal device to execute the methods described in each embodiment of the present application.

The above are only preferred embodiments of the present application, and are not intended to limit the patent scope of the present application. Any equivalent structure or equivalent process transformation made using the contents of the present application specification and drawings, or directly or indirectly applied in other related technical fields, are also included in the patent protection scope of the present application.

Claims (10)

1. The front-end processing method for realizing the theme switching based on the SVG is characterized by comprising the following steps of:

Acquiring a website to be subject switched, and classifying the acquired target colors in the website to obtain a conventional color and a picture color;

Based on the switching of the SVG filter control target color, processing the conventional color to obtain the color effect with the filter;

Dividing the picture into different areas based on an SVG cutting function, and setting SVG filters for the different areas to process the colors of the picture so as to obtain a color effect with partition filters;

And according to the processing results of the conventional colors and the picture colors, realizing the theme switching of the website to be subjected to the theme switching.

2. The front-end processing method for implementing theme switching based on SVG as claimed in claim 1, wherein:

the conventional colors comprise text colors, background colors and frame colors;

the picture colors comprise picture resource colors and background picture colors.

3. The front-end processing method for realizing theme switching based on SVG according to claim 2, wherein the switching of the target color based on SVG filter is performed to process the conventional color to obtain the color effect with the filter, specifically comprising:

controlling switching of each target color in the conventional colors based on the SVG filter;

Different color effects are realized through different filters so as to treat the conventional colors and obtain the color effect with the filters.

4. The front-end processing method for implementing theme switching based on SVG as claimed in claim 2, wherein the SVG-based cutting function divides the picture into different areas, and performs SVG filter setting on the different areas to process the color of the picture to obtain the color effect with the partition filter, specifically comprising:

dividing corresponding pictures in the picture colors into different areas based on SVG cutting functions;

Different SVG filters are arranged for different areas so as to process the colors of the pictures and obtain the color effect with the partition filters.

5. The front-end processing method for implementing theme switching based on SVG as claimed in claim 2, wherein the implementing the theme switching of the website to be subjected to the theme switching according to the processing result of the conventional color and the picture color specifically includes:

and according to the color effect result with the filter obtained after the conventional color processing in the website to be subject switched and the color effect result with the partition filter obtained after the picture color processing, the subject switching of the website to be subject switched is realized.

6. The front-end processing device for realizing theme switching based on SVG is characterized by comprising:

the classification module is used for acquiring websites to be subject switched and classifying target colors in the acquired websites to obtain conventional colors and picture colors;

the first processing module is used for controlling the switching of the target color based on the SVG filter, and processing the conventional color to obtain the color effect with the filter;

The second processing module is used for dividing the picture into different areas based on the SVG cutting function, and setting SVG filters for the different areas so as to process the colors of the picture and obtain the color effect with the partition filters;

And the execution module is used for realizing the theme switching of the website to be subjected to the theme switching according to the processing results of the conventional colors and the picture colors.

7. The front-end processing device for implementing theme switching based on SVG according to claim 6, wherein:

the conventional colors comprise text colors, background colors and frame colors;

the picture colors comprise picture resource colors and background picture colors.

8. The front-end processing device for implementing theme switching based on SVG according to claim 7, wherein the SVG filter-based control target color switching processes a conventional color to obtain a color effect with a filter, and specifically includes:

controlling switching of each target color in the conventional colors based on the SVG filter;

Different color effects are realized through different filters so as to treat the conventional colors and obtain the color effect with the filters.

9. The front-end processing device for implementing theme switching based on SVG according to claim 7, wherein the SVG-based cutting function divides the picture into different areas, and performs SVG filter setting on the different areas to process the color of the picture, thereby obtaining the color effect with the partition filter, and the method specifically comprises:

dividing corresponding pictures in the picture colors into different areas based on SVG cutting functions;

Different SVG filters are arranged for different areas so as to process the colors of the pictures and obtain the color effect with the partition filters.

10. Front-end processing device for implementing theme switching based on SVG, wherein the front-end processing device for implementing theme switching based on SVG includes a processor, a memory, and a front-end processing program for implementing theme switching based on SVG stored on the memory and executable by the processor, wherein the front-end processing program for implementing theme switching based on SVG implements the steps of the front-end processing method for implementing theme switching based on SVG according to any one of claims 1 to 5 when the front-end processing program for implementing theme switching based on SVG is executed by the processor.