CN111310085A - Method and device for inserting DOM element into SVG building block working area - Google Patents
Method and device for inserting DOM element into SVG building block working area Download PDFInfo
- Publication number
- CN111310085A CN111310085A CN202010066244.5A CN202010066244A CN111310085A CN 111310085 A CN111310085 A CN 111310085A CN 202010066244 A CN202010066244 A CN 202010066244A CN 111310085 A CN111310085 A CN 111310085A
- Authority
- CN
- China
- Prior art keywords
- target
- svg
- building block
- dom
- working area
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T11/00—2D [Two Dimensional] image generation
- G06T11/60—Editing figures and text; Combining figures or text
Abstract
The invention discloses a method and a device for inserting DOM elements into a SVG building block working area, wherein the method comprises the following steps: acquiring a target DOM element to be inserted into the SVG building block working area; generating a target container for wrapping the target DOM element, and wrapping the target DOM element in the target container; and inserting the target container wrapped by the target DOM element into the SVG building block working area. The invention can easily insert DOM elements into the SVG building block working area and can enjoy the declarative experience brought by the React frame.
Description
Technical Field
The invention relates to the technical field of network programming application, in particular to a method and a device for inserting DOM elements into SVG building block working areas.
Background
SVG refers to scalable vector graphics, is based on extensible markup language (a subset of standard universal markup language), is a graphics format for describing two-dimensional vector graphics, is established by the world wide web consortium, and is an open standard. The DOM is a Document Object Model (DOM), which is a standard programming interface for processing extensible markup language. On a web page, the objects that organize a page (or document) are organized in a tree structure, and the standard model used to represent the objects in the document is known as the DOM. The DOM can access and modify the content and structure of a document in a platform and language independent manner, in other words this is a common way of representing and processing an HTML or XML (extensible markup language, a subset of the standard universal markup language, a markup language for marking electronic files to be structured) document. In addition, the DOM is designed based on the conventions of the Object Management Group (OMG), and thus can be used in any programming language. At present, WEB pages require that interaction between an SVG building block working area and DOM elements is more and more frequent and complex, and many times developers have to use a more complicated method for inserting the DOM elements in the SVG building block working area.
Disclosure of Invention
The embodiment of the invention provides a method and a device for inserting DOM elements into a SVG building block working area, which aim to solve the following problems in the prior art: WEB pages require that interaction between an SVG building block working area and DOM elements is more and more frequent and complex, and many times developers have to use a more complicated method for inserting the DOM elements in the SVG building block working area.
In order to solve the above technical problem, a first technical solution adopted in the embodiments of the present invention is as follows:
a method of inserting DOM elements into an SVG building block workspace, comprising: acquiring a target DOM element to be inserted into the SVG building block working area; generating a target container for wrapping the target DOM element, and wrapping the target DOM element in the target container; and inserting the target container wrapped by the target DOM element into the SVG building block working area.
Optionally, the inserting the target container wrapped by the target DOM element into the SVG building block work area includes: performing interactive operation on the target DOM element inserted into the SVG building block working area; and processing the volume of the target container wrapped by the target DOM elements according to the quantity change of the target DOM elements in the interactive operation process.
Optionally, the processing, according to the change in the number of the target DOM elements in the interactive operation process, the volume of the target container after the target DOM elements are wrapped, includes: judging whether the volume of the target container is matched with the number of the target DOM elements in the interactive operation process; and if not, updating the volume of the target container according to the number of the target DOM elements.
Optionally, if the volume of the target container is matched with the number of the target DOM elements, keeping the volume of the target container unchanged.
Optionally, the obtaining a target DOM element to be inserted into the SVG building block work area includes: and generating the target DOM element to be inserted into the SVG building block working area through a React component, wherein the React component generates the target DOM element containing the specified ID by combining the specified ID acquired by the React component.
Optionally, the generating a target container for wrapping the target DOM element includes: analyzing XML data transmitted to the SVG building block working area, wherein the XML data is generated by the target DOM element containing the specified ID; and generating the target container by calling a callback function which is registered in advance and used for generating the container, wherein the callback function completes registration after receiving the XML data in the SVG building block working area.
Optionally, the obtaining a target DOM element to be inserted into the SVG building block work area then includes: and initializing and rendering the SVG building block working area, so that the SVG building block working area after initialization and rendering is matched with the target DOM element.
In order to solve the above technical problem, a second technical solution adopted in the embodiments of the present invention is as follows:
a device for inserting DOM elements into a SVG building block workspace, comprising: the element acquisition module is used for acquiring a target DOM element to be inserted into the SVG building block working area; the container generation module is used for generating a target container for wrapping the target DOM element and wrapping the target DOM element in the target container; and the container insertion module is used for inserting the target container wrapped by the target DOM element into the SVG building block working area.
In order to solve the above technical problem, a third technical solution adopted in the embodiments of the present invention is as follows:
a computer-readable storage medium having stored thereon a computer program which, when executed, implements a method of inserting DOM elements into SVG building block workspaces as described above.
In order to solve the above technical problem, a fourth technical solution adopted in the embodiments of the present invention is as follows:
a computer device comprising a processor, a memory and a computer program stored on the memory and executable on the processor, the processor implementing the method of inserting DOM elements into SVG building blocks workspace as described above when executing the computer program.
The embodiment of the invention has the beneficial effects that: different from the situation of the prior art, the embodiment of the invention obtains the target DOM element to be inserted into the SVG building block working area; generating a target container for wrapping the target DOM element, and wrapping the target DOM element in the target container; the target container after the target DOM element is wrapped is inserted into the SVG building block working area, the DOM element can be easily inserted into the SVG building block working area, and the user can enjoy the declarative experience brought by the fact frame.
Drawings
FIG. 1 is a flowchart illustrating an implementation of an embodiment of a method for inserting DOM elements into a work area of an SVG building block according to a first embodiment of the present invention;
FIG. 2 is a partial structural framework diagram of an embodiment of an apparatus for inserting DOM elements into a work area of an SVG building block according to a second embodiment of the present invention;
FIG. 3 is a partial structural framework diagram of an embodiment of a computer-readable storage medium according to a third embodiment of the present invention;
fig. 4 is a partial structural framework diagram of an embodiment of a computer device according to a fourth embodiment of the present invention.
Detailed Description
Example one
Referring to fig. 1, fig. 1 is a flowchart illustrating an implementation of a method for inserting a DOM element into an SVG building block work area according to an embodiment of the present invention, which can be obtained by referring to fig. 1, and a method for inserting a DOM element into an SVG building block work area according to the present invention includes:
step S101: and acquiring a target DOM element to be inserted into the SVG building block working area.
Step S102: and generating a target container for wrapping the target DOM element, and wrapping the target DOM element in the target container. Wherein the target container may be selected as a foreignObject container.
Step S103: and inserting the target container wrapped by the target DOM element into the SVG building block working area.
In this embodiment, optionally, the inserting the target container wrapped by the target DOM element into the SVG building block work area then includes:
firstly, carrying out interactive operation with the target DOM element inserted into the SVG building block working area. Wherein the interaction comprises adding or deleting some of the target DOM elements, which may affect the number (size) of the target DOM elements and thus the matching of the target DOM elements and the target container.
And secondly, processing the volume of the target container wrapped by the target DOM elements according to the quantity change of the target DOM elements in the interactive operation process.
In this embodiment, optionally, the processing, according to the change in the number of the target DOM elements in the interactive operation process, the volume of the target container after wrapping the target DOM elements includes:
first, it is determined whether the volume of the target container matches the number of target DOM elements during the course of the interactive operation.
Secondly, if the volume of the target container is not matched with the number of the target DOM elements, updating the volume of the target container according to the number of the target DOM elements, namely updating the volume by adjusting the width and the height of the target container. Specifically, whether to update the size of the forignObject container is determined by getSnapshot BeforeUpdate, componentDidUpdate of the read component lifecycle function. The method comprises the steps of calling getSnapshot BeforeUpdate to obtain the size of a target DOM element before updating, using the size as a parameter to be transmitted to a componentDidUpdate function, comparing the size of the target DOM element after updating by using the parameter in the componentDidUpdate function, updating the size of a foreignObject container if the size of the target DOM element is different from that of the target DOM element after updating, and not performing updating operation if the size of the target DOM element is the same as that of the target DOM element after updating.
In this embodiment, optionally, if the volume of the target container matches with the number of the target DOM elements, the volume of the target container is kept unchanged.
In this embodiment, optionally, the obtaining of the target DOM element to be inserted into the SVG building block work area includes:
generating the target DOM element to be inserted into the SVG building block working area through a React component, wherein the React component generates the target DOM element containing the specified ID through combining the specified ID (address information) acquired by the React component. Specifically, a specified ID is transmitted to the React component, a DOM element generated by the React component is provided with the specified ID, the DOM element is serialized into an XML structure and then transmitted to the SVG building block working area, and then a corresponding callback function is registered and used for generating a target container wrapping the target DOM element. A callback function is a function called by a function pointer, and if the pointer (address) of a function is passed as a parameter to another function, we say it is a callback function when this pointer is used to call the function to which it points. The callback function is not directly called by the implementer of the function, but is called by another party when a specific event or condition occurs, for responding to the event or condition.
The React component is a Javascript (interpreted scripting language) library used for constructing a user interface, so that the interactive UI (interface) is easy to create, a concise view is designed for each state of the application, and the React can effectively update and correctly render the component when data is changed.
In this embodiment, optionally, the generating a target container for wrapping the target DOM element includes:
first, parsing XML data passed to the SVG building block workspace, the XML data generated by the target DOM element containing the specified ID.
Secondly, generating the target container by calling a callback function which is registered in advance and used for generating the container, wherein the callback function completes registration after receiving the XML data in the SVG building block working area.
In this embodiment, optionally, the obtaining a target DOM element to be inserted into the SVG building block workspace then includes:
and initializing and rendering the SVG building block working area, so that the SVG building block working area after initialization and rendering is matched with the target DOM element.
According to the embodiment of the invention, the target DOM element to be inserted into the SVG building block working area is obtained; generating a target container for wrapping the target DOM element, and wrapping the target DOM element in the target container; the target container after the target DOM element is wrapped is inserted into the SVG building block working area, the DOM element can be easily inserted into the SVG building block working area, and the user can enjoy the declarative experience brought by the fact frame.
Example two
Referring to fig. 2, fig. 2 is a partial structural frame diagram of a device for inserting DOM elements into a working area of an SVG building block according to an embodiment of the present invention, which can be obtained by referring to fig. 2, and the device 100 for inserting DOM elements into a working area of an SVG building block according to the present invention includes:
and the element obtaining module 110 is configured to obtain a target DOM element to be inserted into the SVG building block work area.
And the container generating module 120 is configured to generate a target container for wrapping the target DOM element, and wrap the target DOM element in the target container.
And the container insertion module 130 is configured to insert the target container wrapped by the target DOM element into the SVG building block work area.
According to the embodiment of the invention, the target DOM element to be inserted into the SVG building block working area is obtained; generating a target container for wrapping the target DOM element, and wrapping the target DOM element in the target container; the target container after the target DOM element is wrapped is inserted into the SVG building block working area, the DOM element can be easily inserted into the SVG building block working area, and the user can enjoy the declarative experience brought by the fact frame.
EXAMPLE III
Referring to fig. 3, a computer-readable storage medium 10 according to an embodiment of the present invention can be seen, where the computer-readable storage medium 10 includes: ROM/RAM, magnetic disks, optical disks, etc., on which is stored a computer program 11, said computer program 11, when executed, implementing the method of inserting DOM elements into SVG building blocks work areas as described in embodiment one. Since the method for inserting the DOM elements into the SVG block working area is described in detail in the first embodiment, the description is not repeated here.
According to the method for inserting the DOM element into the SVG building block working area, which is realized by the embodiment of the invention, the target DOM element to be inserted into the SVG building block working area is obtained; generating a target container for wrapping the target DOM element, and wrapping the target DOM element in the target container; the target container after the target DOM element is wrapped is inserted into the SVG building block working area, the DOM element can be easily inserted into the SVG building block working area, and the user can enjoy the declarative experience brought by the fact frame.
Example four
Referring to fig. 4, a computer device 20 according to an embodiment of the present invention includes a processor 21, a memory 22, and a computer program 221 stored in the memory 22 and running on the processor 21, wherein the processor 21 executes the computer program 221 to implement the method for inserting DOM elements into the SVG block working area according to an embodiment. Since the method for inserting the DOM elements into the SVG block working area is described in detail in the first embodiment, the description is not repeated here.
According to the method for inserting the DOM element into the SVG building block working area, which is realized by the embodiment of the invention, the target DOM element to be inserted into the SVG building block working area is obtained; generating a target container for wrapping the target DOM element, and wrapping the target DOM element in the target container; the target container after the target DOM element is wrapped is inserted into the SVG building block working area, the DOM element can be easily inserted into the SVG building block working area, and the user can enjoy the declarative experience brought by the fact frame.
The above description is only an embodiment of the present invention, and not intended to limit the scope of the present invention, and all modifications of equivalent structures and equivalent processes performed by the present specification and drawings, or directly or indirectly applied to other related technical fields, are included in the scope of the present invention.
Claims (10)
1. A method for inserting DOM elements into a SVG building block working area is characterized by comprising the following steps:
acquiring a target DOM element to be inserted into the SVG building block working area;
generating a target container for wrapping the target DOM element, and wrapping the target DOM element in the target container;
and inserting the target container wrapped by the target DOM element into the SVG building block working area.
2. The method of inserting DOM elements into an SVG building block workspace of claim 1, wherein said inserting said target container wrapped around said target DOM element into said SVG building block workspace thereafter comprises:
performing interactive operation on the target DOM element inserted into the SVG building block working area;
and processing the volume of the target container wrapped by the target DOM elements according to the quantity change of the target DOM elements in the interactive operation process.
3. The method for inserting DOM elements into an SVG building block workspace of claim 2, wherein said processing the volume of said target container after wrapping said target DOM elements according to changes in the number of said target DOM elements during an interactive operation comprises:
judging whether the volume of the target container is matched with the number of the target DOM elements in the interactive operation process;
and if not, updating the volume of the target container according to the number of the target DOM elements.
4. The method for inserting DOM elements into an SVG building block workspace of claim 1, wherein the volume of the target container is maintained if the volume of the target container matches the number of the target DOM elements.
5. The method for inserting DOM elements into an SVG building block workspace of claim 1, wherein said obtaining a target DOM element to be inserted into an SVG building block workspace comprises:
and generating the target DOM element to be inserted into the SVG building block working area through a React component, wherein the React component generates the target DOM element containing the specified ID by combining the specified ID acquired by the React component.
6. The method for inserting DOM elements into an SVG building block workspace of claim 5, wherein said generating a target container for wrapping said target DOM element comprises:
analyzing XML data transmitted to the SVG building block working area, wherein the XML data is generated by the target DOM element containing the specified ID;
and generating the target container by calling a callback function which is registered in advance and used for generating the container, wherein the callback function completes registration after receiving the XML data in the SVG building block working area.
7. The method for inserting DOM elements into an SVG building block workspace of claim 1, wherein said obtaining a target DOM element to be inserted into an SVG building block workspace then comprises:
and initializing and rendering the SVG building block working area, so that the SVG building block working area after initialization and rendering is matched with the target DOM element.
8. A device for inserting DOM elements into a SVG building block workspace, comprising:
the element acquisition module is used for acquiring a target DOM element to be inserted into the SVG building block working area;
the container generation module is used for generating a target container for wrapping the target DOM element and wrapping the target DOM element in the target container;
and the container insertion module is used for inserting the target container wrapped by the target DOM element into the SVG building block working area.
9. A computer-readable storage medium, having stored thereon a computer program which, when executed, implements the method of inserting DOM elements into SVG building block workspaces of any one of claims 1 to 7.
10. A computer device comprising a processor, a memory and a computer program stored on said memory and executable on said processor, said processor implementing the method of inserting DOM elements into SVG building blocks workspace of any one of claims 1 to 7 when executing said computer program.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010066244.5A CN111310085B (en) | 2020-01-20 | 2020-01-20 | Method and device for inserting DOM element into SVG building block working area |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010066244.5A CN111310085B (en) | 2020-01-20 | 2020-01-20 | Method and device for inserting DOM element into SVG building block working area |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN111310085A true CN111310085A (en) | 2020-06-19 |
| CN111310085B CN111310085B (en) | 2023-01-10 |
Family
ID=71160799
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010066244.5A Active CN111310085B (en) | 2020-01-20 | 2020-01-20 | Method and device for inserting DOM element into SVG building block working area |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111310085B (en) |
Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN1858728A (en) * | 2006-02-23 | 2006-11-08 | 珠海金山软件股份有限公司 | Method for inserting SVG cartoon data in SVG |
| US20080127153A1 (en) * | 2006-07-20 | 2008-05-29 | Liu Peter T | Language for binding Scalable Vector Graphics elements to JAVA classes |
-
2020
- 2020-01-20 CN CN202010066244.5A patent/CN111310085B/en active Active
Patent Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN1858728A (en) * | 2006-02-23 | 2006-11-08 | 珠海金山软件股份有限公司 | Method for inserting SVG cartoon data in SVG |
| US20080127153A1 (en) * | 2006-07-20 | 2008-05-29 | Liu Peter T | Language for binding Scalable Vector Graphics elements to JAVA classes |
Non-Patent Citations (3)
| Title |
|---|
| LIU_SOFTWARE: ""SVG<foreignObject>简介与截图（html转图片）等应用"", 《HTTPS//BLOG.CSDN.NET/A460550542/ARTICLE/DETAILS/87274256》 * |
| RAHEL LUTHY: ""React&SVG:HTML inside foreignobject not rendered"", 《HTTPS://STACKOVERFLOW.COM/QUESTIONS/39504988/REACT-SVG-HTML-INSIDE-FOREIGNOBJECT-NOT-RENDERED》 * |
| 张迪: "SVG文字交互区域的制作注意：html object in SVG", 《WWW.STORAGELAB.ORG.CN/ZHANGDI/2014/08/03/SVG文字交互区域的制作注意：HTML-OBJECT-IN-SVG/》 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN111310085B (en) | 2023-01-10 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN109254773B (en) | Skeleton page generation method, device, equipment and storage medium | |
| US10008009B1 (en) | Method for generating dynamic vector graphics | |
| CN112433799A (en) | Page generation method, device, equipment and medium | |
| US9576068B2 (en) | Displaying selected portions of data sets on display devices | |
| WO2017124952A1 (en) | Webpage script loading method and device | |
| CA2831588C (en) | Cross-compiling swf to html using an intermediate format | |
| CN109840083B (en) | Webpage component template construction method and device, computer equipment and storage medium | |
| KR101494844B1 (en) | System for Transforming Chart Using Metadata and Method thereof | |
| CN110908712A (en) | Data processing method and equipment for cross-platform mobile terminal | |
| CN104049991A (en) | Method and system for converting network applications into mobile applications | |
| CN113918151A (en) | Low-code page development method, device, equipment and storage medium | |
| CN114791988A (en) | Browser-based PDF file analysis method, system and storage medium | |
| CN110263279B (en) | Page generation method and device, electronic equipment and computer readable storage medium | |
| US20180173683A1 (en) | Graphics display capture system | |
| CN112287255B (en) | Page construction method and device, computing equipment and computer readable storage medium | |
| CN111310085B (en) | Method and device for inserting DOM element into SVG building block working area | |
| CN112905944A (en) | Page online dynamic generation method and device, electronic equipment and readable storage medium | |
| CN111124924B (en) | API deployment method and device, electronic equipment and storage medium | |
| US10140278B2 (en) | Computer-implemented methods and systems for associating files with cells of a collaborative spreadsheet | |
| CN111914198A (en) | Method, system and electronic equipment for realizing browser compatibility | |
| CN113050921A (en) | Webpage conversion method, device, storage medium and computer equipment | |
| CN112330816B (en) | AR identification processing method and device and electronic device | |
| CN115657899A (en) | Icon processing method and device, electronic equipment and storage medium | |
| US11295493B2 (en) | System and method for generating scalar vector graphics image in an imaginary console | |
| CN115168774A (en) | Webpage rendering method and system, electronic equipment and computer readable storage medium |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |