[发明专利]将DOM元素插入SVG积木工作区的方法及装置

说明书

本发明公开了一种将DOM元素插入SVG积木工作区的方法及装置，其中该方法包括：获取待插入SVG积木工作区的目标DOM元素；生成用于包裹所述目标DOM元素的目标容器，并将所述目标DOM元素包裹在所述目标容器内；将包裹所述目标DOM元素后的所述目标容器插入所述SVG积木工作区。本发明可实现将DOM元素轻易插入所述SVG积木工作区，并能享受到React框架带来的声明式体验。

技术领域

本发明涉及网络编程应用技术领域，特别是涉及一种将DOM元素插入SVG积木工作区的方法及装置。

背景技术

SVG是指可缩放矢量图形，是基于可扩展标记语言(标准通用标记语言的子集)，用于描述二维矢量图形的一种图形格式，它由万维网联盟制定，是一个开放标准。DOM是文档对象模型(Document Object Model，简称DOM)，是处理可扩展标志语言的标准编程接口。在网页上，组织页面(或文档)的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构，换句话说，这是表示和处理一个HTML或XML(可扩展标记语言，标准通用标记语言的子集，是一种用于标记电子文件使其具有结构性的标记语言)文档的常用方法。另外，DOM的设计是以对象管理组织(OMG)的规约为基础的，因此可以用于任何编程语言。目前，WEB网页要求SVG积木工作区与DOM元素之间的交互越来越频繁与复杂，很多时候开发者为了在SVG积木工作区内插入DOM元素不得不使用比较繁琐的方法。

发明内容

本发明实施例提供一种将DOM元素插入SVG积木工作区的方法及装置，以解决现有技术中的以下问题：WEB网页要求SVG积木工作区与DOM元素之间的交互越来越频繁与复杂，很多时候开发者为了在SVG积木工作区内插入DOM元素不得不使用比较繁琐的方法。

为解决上述技术问题，本发明实施例采用的第一技术方案如下：

一种将DOM元素插入SVG积木工作区的方法，其包括：获取待插入SVG积木工作区的目标DOM元素；生成用于包裹所述目标DOM元素的目标容器，并将所述目标DOM元素包裹在所述目标容器内；将包裹所述目标DOM元素后的所述目标容器插入所述SVG积木工作区。

可选地，所述将包裹所述目标DOM元素后的所述目标容器插入所述SVG积木工作区，之后包括：与插入所述SVG积木工作区之后的所述目标DOM元素进行交互操作；根据所述目标DOM元素在交互操作过程中的数量变化，对包裹所述目标DOM元素后的所述目标容器的容积进行处理。

可选地，所述根据所述目标DOM元素在交互操作过程中的数量变化，对包裹所述目标DOM元素后的所述目标容器的容积进行处理，包括：判断在交互操作过程中，所述目标容器的容积是否和所述目标DOM元素的数量相匹配；若不是，则根据所述目标DOM元素的数量对所述目标容器的容积进行更新。

可选地，所述目标容器的容积是否和所述目标DOM元素的数量相匹配，则保持所述目标容器的容积不变。

可选地，所述获取待插入SVG积木工作区的目标DOM元素，包括：通过React组件生成待插入所述SVG积木工作区的所述目标DOM元素，其中所述React组件通过结合自身获取的指定ID生成包含所述指定ID的所述目标DOM元素。

可选地，所述生成用于包裹所述目标DOM元素的目标容器，包括：解析传递到所述SVG积木工作区的XML数据，所述XML数据由包含所述指定ID的所述目标DOM元素所生成；通过调用事先已完成注册的用于生成容器的回调函数，生成所述目标容器，其中所述回调函数在所述SVG积木工作区接收到所述XML数据后完成注册。

可选地，所述获取待插入SVG积木工作区的目标DOM元素，之后包括：对所述SVG积木工作区进行初始化渲染，使初始化渲染后的所述SVG积木工作区与所述目标DOM元素相匹配。

为解决上述技术问题，本发明实施例采用的第二技术方案如下：