Method, device, electronic device and storage medium for displaying vector graphics on a web page
By automatically obtaining and extracting the coordinate information of vector graphics and forming a vector graphics file, the problem of heavy workload of developers manually obtaining coordinate information in the prior art is solved, and the automatic display of vector graphics in web pages is realized.
Patent Information
- Application Number
- CN201910703710.3
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- Filing Date
- 2019-07-31
- Publication Date
- 2025-02-11
- Estimated Expiration
- 2039-07-31
AI Technical Summary
When presenting vector graphics on web pages, developers need to manually determine the vector graphics and obtain their coordinate information, resulting in a large workload.
By obtaining the vector graphics information file of the target vector graphics, extracting coordinate information from it, and forming a vector graphics file based on these coordinate information, and sending it to the user device for display on the web page.
Reduces the workload of developers and automates the display process of vector graphics on web pages.
Smart Images

Figure CN112307391B_ABST
Abstract
Description
Technical Field
[0001] The present invention relates to the technical field of web page front-end design, and in particular to a method, device, electronic equipment and storage medium for displaying vector graphics on a web page. Background Art
[0002] Currently, the method of making a web page is usually to first use HTML (Hyper Text Mark-up Language) to write code to determine the web page structure, and then fill and beautify the web page by adding content, such as adding graphics, adding background colors, etc. to the web page with the defined web page structure.
[0003] In the process of implementing the present invention, the inventors found that the prior art has at least the following problems: in order to present vector graphics on a web page, developers are usually required to first determine the vector graphics and manually obtain the coordinate information corresponding to the vector graphics, and then write the coordinate information corresponding to the vector graphics into the code of the web page, and then present the vector graphics on the web page. Therefore, the workload of developers is relatively large. Summary of the invention
[0004] The purpose of the embodiments of the present invention is to provide a method, device, electronic device and storage medium for displaying vector graphics on a web page, so as to reduce the workload of developers. The specific technical solution is as follows:
[0005] In order to achieve the above object, in a first aspect, an embodiment of the present invention provides a method for displaying vector graphics on a web page, the method comprising:
[0006] Acquire a vector graphics information file corresponding to a target vector graphics, wherein the vector graphics information file includes coordinate information corresponding to the target vector graphics;
[0007] Extracting coordinate information corresponding to the target vector graphic from the vector graphic information file;
[0008] Forming a vector graphics file according to the extracted coordinate information of the target vector graphics;
[0009] The vector graphics file is sent to a user terminal device so that the user terminal device executes the vector graphics file, thereby displaying the target vector graphics in a web page according to the coordinate information of the target vector graphics.
[0010] Optionally, the vector graphics information file is a vector graphics information file corresponding to the target vector graphics, which is generated and exported when the target vector graphics is drawn in a preset vector drawing software;
[0011] The extracting the coordinate information corresponding to the target vector graphic from the vector graphic information file comprises:
[0012] From the exported target vector graphics information file, information with preset markers is obtained, where the information with preset markers is coordinate information corresponding to the target vector graphics.
[0013] Optionally, the target vector graphic is a vector path graphic having multiple paths and the multiple paths have a drawing order;
[0014] The extracting the coordinate information corresponding to the target vector graphic from the vector graphic information file comprises:
[0015] Extracting corresponding coordinate information corresponding to each of the paths from the vector graphics information file according to the drawing order of the multiple paths;
[0016] The vector graphics file formed according to the extracted coordinate information of the target vector graphics includes:
[0017] A vector graphics file is formed according to the extracted coordinate information corresponding to the path and the extraction order of the coordinate information corresponding to the multiple paths, so that the user terminal device can display each of the paths in sequence according to the drawing order of the multiple paths.
[0018] Optionally, the vector graphics file is a vector graphics file in scalable vector graphics SVG format;
[0019] The step of forming a vector graphics file according to the extracted coordinate information of the target vector graphics comprises:
[0020] According to the extracted coordinate information of the target vector graphic, the attribute value of the solid line drawing starting point position attribute in the SVG attribute is set to form a vector graphic file in SVG format.
[0021] Optionally, the method further includes:
[0022] The pattern paradigm configuration information of the target vector graphic input by the user is received, and the attribute value of the pattern paradigm attribute in the SVG attribute is configured according to the configuration information to form a vector graphic file in the SVG format.
[0023] In a second aspect, an embodiment of the present invention provides a device for generating a vector graphic, the device comprising:
[0024] An acquisition module, used for acquiring a vector graphics information file corresponding to a target vector graphics, wherein the vector graphics information file includes coordinate information corresponding to the target vector graphics;
[0025] An extraction module, used for extracting coordinate information corresponding to the target vector graphic from the vector graphic information file;
[0026] A file forming module, used for forming a vector graphics file according to the extracted coordinate information of the target vector graphics;
[0027] The sending module is used to send the vector graphics file to the user terminal device so that the user terminal device executes the vector graphics file, thereby displaying the target vector graphics in the web page according to the coordinate information of the target vector graphics.
[0028] Optionally, the vector graphics information file is a vector graphics information file corresponding to the target vector graphics, which is generated and exported when the target vector graphics is drawn in a preset vector drawing software;
[0029] The extraction module is specifically used to obtain information with preset markers from the exported target vector graphics information file, where the information with preset markers is coordinate information corresponding to the target vector graphics.
[0030] Optionally, the target vector graphic is a vector path graphic having multiple paths and the multiple paths have a drawing order;
[0031] The extraction module is specifically used to extract the corresponding coordinate information corresponding to each of the paths from the vector graphics information file according to the drawing order of the multiple paths;
[0032] The file forming module is specifically used to form a vector graphics file according to the coordinate information corresponding to the extracted path and the extraction order of the coordinate information corresponding to the multiple paths, so that the user terminal device can display each of the paths in sequence according to the drawing order of the multiple paths.
[0033] Optionally, the vector graphics file is a vector graphics file in scalable vector graphics SVG format;
[0034] The file forming module is specifically used to set the attribute value of the solid line drawing starting point position attribute in the SVG attribute according to the extracted coordinate information of the target vector graphic, so as to form a vector graphic file in SVG format.
[0035] Optionally, the device further includes:
[0036] Receiving module: used for receiving the pattern paradigm configuration information of the target vector graphic input by the user, and configuring the attribute value of the pattern paradigm attribute in the SVG attribute according to the configuration information to form a vector graphic file in the SVG format.
[0037] In a third aspect, an embodiment of the present invention provides an electronic device, including a processor, a communication interface, a memory and a communication bus, wherein the processor, the communication interface and the memory communicate with each other via the communication bus;
[0038] Memory, used to store computer programs;
[0039] The processor is used to execute the program stored in the memory, and implements the following steps:
[0040] Acquire a vector graphics information file corresponding to a target vector graphics, wherein the vector graphics information file includes coordinate information corresponding to the target vector graphics;
[0041] Extracting coordinate information corresponding to the target vector graphic from the vector graphic information file;
[0042] Forming a vector graphics file according to the extracted coordinate information of the target vector graphics;
[0043] The vector graphics file is sent to a user terminal device so that the user terminal device executes the vector graphics file, thereby displaying the target vector graphics in a web page according to the coordinate information of the target vector graphics.
[0044] In a fourth aspect, an embodiment of the present invention provides a computer-readable storage medium, wherein the computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the following steps are implemented:
[0045] Acquire a vector graphics information file corresponding to a target vector graphics, wherein the vector graphics information file includes coordinate information corresponding to the target vector graphics;
[0046] Extracting coordinate information corresponding to the target vector graphic from the vector graphic information file;
[0047] Forming a vector graphics file according to the extracted coordinate information of the target vector graphics;
[0048] The vector graphics file is sent to a user terminal device so that the user terminal device executes the vector graphics file, thereby displaying the target vector graphics in a web page according to the coordinate information of the target vector graphics.
[0049] The method, device, electronic device and storage medium for displaying vector graphics on a web page provided by the embodiment of the present invention can realize obtaining the corresponding vector graphics information file of the target vector graphics; extracting the coordinate information corresponding to the target vector graphics from the vector graphics information file; forming a vector graphics file according to the extracted coordinate information of the target vector graphics; sending the vector graphics file to the user terminal device so that the user terminal device executes the vector graphics file, thereby displaying the target vector graphics in the web page according to the coordinate information of the target vector graphics. It can be seen that the method provided by the embodiment of the present invention can automatically obtain the vector graphics information file corresponding to the target vector graphics, extract the coordinate information corresponding to the target vector graphics from the vector graphics information file, and form a vector graphics file according to the extracted coordinate information of the target vector graphics, so that the user terminal device executes the vector graphics file, and displays the target vector graphics in the web page according to the coordinate information of the target vector graphics. Unlike the prior art, the developer needs to first determine the vector graphics and manually obtain the coordinate information corresponding to the vector graphics, and then write the coordinate information corresponding to the vector graphics into the code of the web page before the vector graphics can be presented in the web page, thereby reducing the workload of the developer.
[0050] Of course, it is not necessary to achieve all of the advantages described above at the same time to implement any product or method of the present invention. BRIEF DESCRIPTION OF THE DRAWINGS
[0051] In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative work.
[0052] Figure 1 A schematic diagram of a flow chart of a method for displaying vector graphics on a web page provided by an embodiment of the present invention;
[0053] Figure 2 A schematic diagram of a vector graphics information file;
[0054] Figure 3 Another schematic flow chart of a method for displaying vector graphics on a web page provided by an embodiment of the present invention;
[0055] Figure 4 A schematic diagram of a structure of a device for displaying vector graphics on a web page provided by an embodiment of the present invention;
[0056] Figure 5 Another structural schematic diagram of the device for displaying vector graphics on a web page provided by an embodiment of the present invention;
[0057] Figure 6 A schematic structural diagram of an electronic device provided by an embodiment of the present invention. Specific embodiments
[0058] Next, the technical solutions in the embodiments of the present invention will be clearly and completely described in conjunction with the accompanying drawings in the embodiments of the present invention. Obviously, the described embodiments are only a part of the embodiments of the present invention, rather than all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those of ordinary skill in the art without creative efforts shall fall within the protection scope of the present invention.
[0059] In order to reduce the workload of developers when displaying vector graphics on a web page, an embodiment of the present invention provides a method for displaying vector graphics on a web page. See Figure 1 , the method may include:
[0060] S101: Obtain a vector graphics information file corresponding to the target vector graphics, where the vector graphics information file includes coordinate information corresponding to the target vector graphics;
[0061] Among them, the vector graphics information file is a vector graphics information file generated and exported when the target vector graphics are drawn in a preset vector drawing software, corresponding to the target vector graphics; among them, the drawing software may be AI (Adobe illustrator, vector drawing software) or PS (Adobe Photoshop, PS software).
[0062] In a specific embodiment, the vector graphics file may be a vector graphics file in SVG (Scalable Vector Graphics) format.
[0063] S102: Extract the coordinate information corresponding to the target vector graphics from the vector graphics information file;
[0064] Specifically, it may be to obtain the information with a preset identifier from the exported target vector graphics information file, and the information with the preset identifier may be the coordinate information corresponding to the target vector graphics.
[0065] For example: if the preset identifier is "<g", then see Figure 2 Extract all information with the identifier "<g" from the vector graphics information file.
[0066] S103: Form a vector graphics file according to the extracted coordinate information of the target vector graphics;
[0067] Among them, the vector graphics file can be a vector graphics file in the scalable vector graphics SVG format. Specifically, the attribute value of the solid line drawing starting point position attribute in the SVG attribute can be set according to the extracted coordinate information of the target vector graphics to form a vector graphics file in the SVG format.
[0068] In a specific embodiment, the target vector graphic can be a vector path graphic having multiple paths and the multiple paths have a drawing order; in this embodiment, the corresponding coordinate information corresponding to each path can be extracted from the vector graphics information file according to the drawing order of the multiple paths; and based on the coordinate information corresponding to the extracted paths and the extraction order of the coordinate information corresponding to the multiple paths, a vector graphics file is formed so that the user-end device can display each path in sequence according to the drawing order of the multiple paths.
[0069] S104: Sending the vector graphics file to the client device so that the client device executes the vector graphics file, thereby displaying the target vector graphics in the web page according to the coordinate information of the target vector graphics.
[0070] Depend on Figure 1 As can be seen from the illustrated embodiment, the method for displaying vector graphics on a web page provided by the embodiment of the present invention can automatically obtain a vector graphics information file corresponding to a target vector graphics, extract coordinate information corresponding to the target vector graphics from the vector graphics information file, and form a vector graphics file based on the extracted coordinate information of the target vector graphics, so that the user terminal device executes the vector graphics file and displays the target vector graphics on the web page according to the coordinate information of the target vector graphics. Unlike the prior art, the developer is required to first determine the vector graphics and manually obtain the coordinate information corresponding to the vector graphics, and then write the coordinate information corresponding to the vector graphics into the code of the web page before the vector graphics can be presented on the web page, thereby reducing the workload of the developer.
[0071] The following is a specific embodiment to further illustrate the method for displaying vector graphics on a web page provided by the embodiment of the present invention.
[0072] In this embodiment, the vector graphics file is a vector graphics file in the SVG format in CSS3, wherein CSS3 is the latest version of CSS (Cascading Style Sheet).
[0073] See also Figure 3 The method for displaying vector graphics on a web page provided by an embodiment of the present invention may include:
[0074] S301: Acquire a vector graphics information file in SVG format corresponding to a target vector graphics, wherein the vector graphics information file includes coordinate information corresponding to the target vector graphics;
[0075] Among them, the vector graphic information file is a vector graphic information file generated and exported when the target vector graphic is drawn in a preset vector drawing software and corresponding to the target vector graphic.
[0076] S302: Extract the information with the tag "<g" from the target vector graphic information file; among them, the information with the tag "<g" is the coordinate information corresponding to the target vector graphic;
[0077] S303: Receive the pattern paradigm configuration information of the target vector graphic input by the user, and configure the attribute value of the pattern paradigm attribute in the SVG attribute and the coordinate information corresponding to the target vector graphic to form a vector graphic file in SVG format;
[0078] S304: Send the vector graphic file to the client device so that the client device executes the vector graphic file, thereby displaying the target vector graphic in the web page according to the coordinate information of the target vector graphic.
[0079] Specifically, it can be to configure the stroke-dashoffset attribute for setting the pattern paradigm of the dotted line of the side and the stroke-dasharray attribute for setting the starting position of the solid line drawing in the stroke attribute (brush attribute) of the vector graphic file in SVG format according to the received configuration information input by the user, so as to form a vector graphic file in SVG format. In this way, the client can display the drawing process of the target vector graphic starting from the drawing starting point in the web page according to the coordinate information of the target vector graphic and the attribute values of the pattern paradigm attribute for setting the side dotted line and the attribute for setting the starting position of the solid line drawing in the vector graphic file, that is, dynamically generate the target vector graphic. Among them, in practical applications, the stroke-dashoffset attribute and the stroke-dasharray attribute values can be set to the same value, so as to achieve the purpose of dynamically drawing the vector graphic.
[0080] By Figure 3As can be seen from the illustrated embodiment, the method for displaying vector graphics on a web page provided by the embodiment of the present invention can automatically obtain a vector graphics information file corresponding to a target vector graphics, extract coordinate information corresponding to the target vector graphics from the vector graphics information file, and form a vector graphics file based on the extracted coordinate information of the target vector graphics, so that the user terminal device executes the vector graphics file and displays the target vector graphics on the web page according to the coordinate information of the target vector graphics. Unlike the prior art, the developer is required to first determine the vector graphics and manually obtain the coordinate information corresponding to the vector graphics, and then write the coordinate information corresponding to the vector graphics into the code of the web page before the vector graphics can be presented on the web page, thereby reducing the workload of the developer.
[0081] In addition, the method provided by the embodiment of the present invention can also configure the pattern paradigm attributes of the dotted lines of the edges and the solid line drawing starting point position attributes in the vector graphics file in SVG format according to the configuration information received from the user input, thereby realizing the dynamic generation of the target vector graphics in the web page.
[0082] and Figure 1 Corresponding to the embodiment shown, the embodiment of the present invention also provides a device for displaying vector graphics on a web page, such as Figure 4 As shown, the device for displaying vector graphics on a web page includes:
[0083] An acquisition module 401 is used to acquire a vector graphics information file corresponding to the target vector graphics, wherein the vector graphics information file includes coordinate information corresponding to the target vector graphics;
[0084] An extraction module 402 is used to extract coordinate information corresponding to a target vector graphic from a vector graphic information file;
[0085] A file forming module 403, used to form a vector graphics file according to the extracted coordinate information of the target vector graphics;
[0086] The sending module 404 is used to send the vector graphics file to the user terminal device, so that the user terminal device executes the vector graphics file, thereby displaying the target vector graphics in the webpage according to the coordinate information of the target vector graphics.
[0087] Optionally, the vector graphics information file is a vector graphics information file corresponding to the target vector graphics, which is generated and exported when the target vector graphics are drawn in a preset vector drawing software;
[0088] The extraction module 402 is specifically used to obtain information with a preset marker from the exported target vector graphics information file, where the information with the preset marker is coordinate information corresponding to the target vector graphics.
[0089] Optionally, the target vector graphic is a vector path graphic having multiple paths and the multiple paths have a drawing order;
[0090] The extraction module 402 is specifically used to extract the corresponding coordinate information corresponding to each path from the vector graphics information file according to the drawing order of multiple paths;
[0091] The file forming module 403 is specifically used to form a vector graphics file according to the coordinate information corresponding to the extracted path and the extraction order of the coordinate information corresponding to the multiple paths, so that the user terminal device can display each path in sequence according to the drawing order of the multiple paths.
[0092] Optionally, the vector graphics file is a vector graphics file in a scalable vector graphics SVG format;
[0093] The file forming module 403 is specifically used to set the attribute value of the solid line drawing starting point position attribute in the SVG attribute according to the extracted coordinate information of the target vector graphic, so as to form a vector graphic file in the SVG format.
[0094] See also Figure 5 The device for displaying vector graphics on a web page may further include:
[0095] The receiving module 501 is used to receive pattern pattern configuration information of a target vector graphic input by a user, and configure the attribute value of the pattern pattern attribute in the SVG attribute according to the configuration information to form a vector graphic file in the SVG format.
[0096] Depend on Figure 4 and Figure 5 As can be seen from the illustrated embodiment, the device for displaying vector graphics on a web page provided by the embodiment of the present invention can automatically obtain a vector graphics information file corresponding to a target vector graphics, extract coordinate information corresponding to the target vector graphics from the vector graphics information file, and form a vector graphics file based on the extracted coordinate information of the target vector graphics, so that the user terminal device executes the vector graphics file and displays the target vector graphics on the web page according to the coordinate information of the target vector graphics. Unlike the prior art, the developer is required to first determine the vector graphics and manually obtain the coordinate information corresponding to the vector graphics, and then write the coordinate information corresponding to the vector graphics into the code of the web page before the vector graphics can be presented on the web page, thereby reducing the workload of the developer.
[0097] and Figure 1 Corresponding to the embodiment shown, the embodiment of the present invention also provides an electronic device, such as Figure 6As shown, it includes a processor 601, a communication interface 602, a memory 603 and a communication bus 604, wherein the processor 601, the communication interface 602, and the memory 603 communicate with each other through the communication bus 604.
[0098] Memory 603, used for storing computer programs;
[0099] The processor 601 is used to execute the program stored in the memory 603 to implement the following steps:
[0100] Obtaining a vector graphics information file corresponding to a target vector graphics, wherein the vector graphics information file includes coordinate information corresponding to the target vector graphics;
[0101] Extracting coordinate information corresponding to the target vector graphic from the vector graphic information file;
[0102] A vector graphics file is formed according to the extracted coordinate information of the target vector graphics;
[0103] The vector graphics file is sent to the user terminal device so that the user terminal device executes the vector graphics file, thereby displaying the target vector graphics in the web page according to the coordinate information of the target vector graphics.
[0104] Depend on Figure 6 As can be seen from the illustrated embodiment, the electronic device provided by the embodiment of the present invention can automatically obtain the vector graphics information file corresponding to the target vector graphics, extract the coordinate information corresponding to the target vector graphics from the vector graphics information file, and form a vector graphics file based on the extracted coordinate information of the target vector graphics, so that the user terminal device executes the vector graphics file and displays the target vector graphics in the web page according to the coordinate information of the target vector graphics. Unlike the prior art, the developer is required to first determine the vector graphics and manually obtain the coordinate information corresponding to the vector graphics, and then write the coordinate information corresponding to the vector graphics into the code of the web page before the vector graphics can be presented in the web page, thereby reducing the workload of the developer.
[0105] The communication bus mentioned in the above electronic device can be a Peripheral Component Interconnect (PCI) bus or an Extended Industry Standard Architecture (EISA) bus, etc. The communication bus can be divided into an address bus, a data bus, a control bus, etc. For ease of representation, only one thick line is used in the figure, but it does not mean that there is only one bus or one type of bus.
[0106] The communication interface is used for communication between the above electronic device and other devices.
[0107] The memory may include a random access memory (RAM) or a non-volatile memory (NVM), such as at least one disk memory. Optionally, the memory may also be at least one storage device located away from the aforementioned processor.
[0108] The above-mentioned processor can be a general-purpose processor, including a central processing unit (CPU), a network processor (NP), etc.; it can also be a digital signal processor (DSP), an application specific integrated circuit (ASIC), a field programmable gate array (FPGA) or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components.
[0109] In another embodiment of the present invention, a computer-readable storage medium is provided, in which a computer program is stored. When the computer program is executed by a processor, the steps of any of the above methods for displaying vector graphics on a web page are implemented.
[0110] In another embodiment of the present invention, a computer program product including instructions is provided. When the computer program product is run on a computer, the computer executes any method of displaying vector graphics on a web page in the above embodiments.
[0111] In the above embodiments, it can be implemented in whole or in part by software, hardware, firmware or any combination thereof. When implemented by software, it can be implemented in whole or in part in the form of a computer program product. The computer program product includes one or more computer instructions. When the computer program instructions are loaded and executed on a computer, the process or function described in the embodiment of the present invention is generated in whole or in part. The computer can be a general-purpose computer, a special-purpose computer, a computer network, or other programmable device. The computer instructions can be stored in a computer-readable storage medium, or transmitted from one computer-readable storage medium to another computer-readable storage medium. For example, the computer instructions can be transmitted from a website site, computer, server or data center to another website site, computer, server or data center by wired (e.g., coaxial cable, optical fiber, digital subscriber line (DSL)) or wireless (e.g., infrared, wireless, microwave, etc.). The computer-readable storage medium can be any available medium that a computer can access or a data storage device such as a server or data center that includes one or more available media integrated. The available medium can be a magnetic medium (e.g., a floppy disk, a hard disk, a tape), an optical medium (e.g., a DVD), or a semiconductor medium (e.g., a solid-state hard disk Solid State Disk (SSD)), etc.
[0112] It should be noted that, in this article, relational terms such as first and second, etc. are only used to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Moreover, the terms "include", "comprise" or any other variants thereof are intended to cover non-exclusive inclusion, so that a process, method, article or device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, article or device. In the absence of further restrictions, the elements defined by the sentence "comprise a ..." do not exclude the existence of other identical elements in the process, method, article or device including the elements.
[0113] Each embodiment in this specification is described in a related manner, and the same or similar parts between the embodiments can be referred to each other, and each embodiment focuses on the differences from other embodiments. In particular, for the device embodiment, since it is basically similar to the method embodiment, the description is relatively simple, and the relevant parts can be referred to the partial description of the method embodiment.
[0114] The above description is only a preferred embodiment of the present invention and is not intended to limit the protection scope of the present invention. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present invention are included in the protection scope of the present invention.
Claims
1. A method for displaying vector graphics on a web page, characterized in that: The method comprises: Acquire a vector graphics information file corresponding to a target vector graphics, wherein the vector graphics information file includes coordinate information corresponding to the target vector graphics; the target vector graphics is a vector graphics in a scalable vector graphics SVG format; Extracting coordinate information corresponding to the target vector graphic from the vector graphic information file; According to the extracted coordinate information of the target vector graphic, setting the attribute value of the solid line drawing starting point position attribute in the SVG attribute; Receiving pattern pattern configuration information of the target vector graphic input by a user; Configuring the attribute value of the pattern pattern attribute in the SVG attribute and the attribute value of the solid line drawing starting point position attribute in the SVG attribute according to the configuration information to form a vector graphics file in SVG format; The vector graphics file is sent to the user-end device so that the user-end device displays the drawing process of the target vector graphics in the web page starting from the drawing starting point according to the coordinate information of the target vector graphics, the attribute value of the pattern paradigm attribute in the SVG attributes, and the attribute value of the solid line drawing starting point position attribute in the SVG attributes.
2. The method according to claim 1, characterized in that: The vector graphics information file is a vector graphics information file corresponding to the target vector graphics, which is generated and exported when the target vector graphics are drawn in a preset vector drawing software; The extracting the coordinate information corresponding to the target vector graphic from the vector graphic information file comprises: From the exported target vector graphics information file, information with preset markers is obtained, where the information with preset markers is coordinate information corresponding to the target vector graphics.
3. The method according to claim 1, characterized in that The target vector graphic is a vector path graphic having a plurality of paths and the plurality of paths have a drawing order; The extracting the coordinate information corresponding to the target vector graphic from the vector graphic information file comprises: Extracting corresponding coordinate information corresponding to each of the paths from the vector graphics information file according to the drawing order of the multiple paths; After configuring the attribute value of the pattern pattern attribute in the SVG attribute and the attribute value of the solid line drawing starting point position attribute in the SVG attribute according to the configuration information to form a vector graphics file in SVG format, the method further includes: The vector graphics file is formed according to the extracted coordinate information corresponding to the path and the extraction order of the coordinate information corresponding to the multiple paths, so that the user terminal device can display each of the paths in sequence according to the drawing order of the multiple paths.
4. A device for displaying vector graphics on a web page, characterized in that: The device comprises: An acquisition module, used for acquiring a vector graphics information file corresponding to a target vector graphics, wherein the vector graphics information file includes coordinate information corresponding to the target vector graphics; the target vector graphics is a vector graphics file in a scalable vector graphics SVG format; An extraction module, used for extracting coordinate information corresponding to the target vector graphic from the vector graphic information file; A file forming module, used for setting the attribute value of the solid line drawing starting point position attribute in the SVG attribute according to the extracted coordinate information of the target vector graphic; A receiving module, used for receiving pattern paradigm configuration information of the target vector graphic input by a user; The file forming module is further used to configure the attribute value of the pattern paradigm attribute in the SVG attribute and the attribute value of the solid line drawing starting point position attribute in the SVG attribute according to the configuration information, so as to form a vector graphics file in SVG format; A sending module is used to send the vector graphics file to a user-end device so that the user-end device displays the drawing process of the target vector graphics in a web page starting from the drawing starting point according to the coordinate information of the target vector graphics, the attribute value of the pattern paradigm attribute in the SVG attributes, and the attribute value of the solid line drawing starting point position attribute in the SVG attributes.
5. The device according to claim 4, characterized in that The vector graphics information file is a vector graphics information file corresponding to the target vector graphics, which is generated and exported when the target vector graphics are drawn in a preset vector drawing software; The extraction module is specifically used to obtain information with preset markers from the exported target vector graphics information file, where the information with preset markers is coordinate information corresponding to the target vector graphics.
6. The device according to claim 4, characterized in that The target vector graphic is a vector path graphic having a plurality of paths and the plurality of paths have a drawing order; The extraction module is specifically used to extract the corresponding coordinate information corresponding to each of the paths from the vector graphics information file according to the drawing order of the multiple paths; The file forming module is also used to form the vector graphics file according to the coordinate information corresponding to the extracted path and the extraction order of the coordinate information corresponding to the multiple paths, so that the user-end device can display each of the paths in sequence according to the drawing order of the multiple paths.
7. An electronic device, characterized in that: It includes a processor, a communication interface, a memory and a communication bus, wherein the processor, the communication interface and the memory communicate with each other through the communication bus; Memory, used to store computer programs; A processor, for implementing the method steps described in any one of claims 1 to 3 when executing a program stored in a memory.
8. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the method steps described in any one of claims 1 to 3 are implemented.
Citation Information
Patent Citations
Method and device for drawing pattern on page
CN104572967A
Webpage icon display method and device
CN106294504A