CN117331557B

CN117331557B - 一种表单渲染方法、装置、介质及设备

Info

Publication number: CN117331557B
Application number: CN202311385589.7A
Authority: CN
Inventors: 安晓冬; 赵充
Original assignee: Beijing Biscuit Technology Co ltd
Current assignee: Beijing Biscuit Technology Co ltd
Priority date: 2023-10-24
Filing date: 2023-10-24
Publication date: 2024-05-14
Anticipated expiration: 2043-10-24
Also published as: CN117331557A

Abstract

本申请公开了一种表单渲染方法、装置、介质及设备，方法包括：获取svg素材；对svg素材进行打标操作，得到svg元素节点；对svg元素节点进行扁平化处理，得到目标数组，其中，目标数据是用于存储svg元素的集合；对目标数组中的svg元素进行处理，生成svg元素的配置项；根据配置项，在视图中按照元素单元的类型渲染表单。本发明为用户提供了可视化编辑入口，不仅扩展性强，根据不同打标标识进行定制化开发，还可避免侵入式操作导致的元素损坏，以及实时预览编辑效果，提升效率。

Description

一种表单渲染方法、装置、介质及设备

技术领域

本申请涉及素材编辑技术领域，尤其涉及一种表单渲染方法、装置、介质及设备。

背景技术

在365编辑器存在多种图文素材，如需对如图1所示的一个SVG素材进行编辑,需要通过编辑svg源代码来实现。

但是，此种方式对于用户不友好，并且存在上手难度大、难以查找修改位置、易出错导致素材损坏等诸多问题。

发明内容

本申请的主要目的在于提供一种表单渲染方法、装置、介质及设备，以解决相关技术中的方式对于用户不友好，并且存在上手难度大、难以查找修改位置、易出错导致素材损坏的问题。

为了实现上述目的，第一方面，本申请提供了一种表单渲染方法，包括：

获取svg素材；

对svg素材进行打标操作，得到svg元素节点；

对svg元素节点进行扁平化处理，得到目标数组，其中，目标数据是用于存储svg元素的集合；

对目标数组中的svg元素进行处理，生成svg元素的配置项；

根据配置项，在视图中按照元素单元的类型渲染表单。

在一种可能的实现方式中，对svg素材进行打标操作，得到svg元素节点，包括：

通过svg编辑入口在svg素材的根节点添加标识，得到svg元素节点。

在一种可能的实现方式中，对svg元素节点进行扁平化处理，得到目标数组，包括：

采用递归深度优先算法对svg元素节点进行扁平化处理，得到目标数组。

在一种可能的实现方式中，采用递归深度优先算法对svg元素节点进行扁平化处理，得到目标数组，包括：

创建空数组；

将svg元素节点的集合中的第一个svg元素节点对应的svg元素添加到空数组中，并调用递归函数处理svg元素，得到目标数组。

在一种可能的实现方式中，对目标数组中的svg元素进行处理，生成svg元素的配置项，包括：

利用svg节点类型匹配算法对目标数组中的svg元素进行处理，生成svg元素的配置项。

在一种可能的实现方式中，利用svg节点类型匹配算法对目标数组中的svg元素进行处理，生成svg元素的配置项，包括：

将svg元素按照类型划分成元素单元；

基于元素单元的类型，提取元素单元的属性数据，生成元素单元的配置项。

在一种可能的实现方式中，元素单元至少包括文字、图片和动画。

第二方面，本发明实施例提供了一种表单渲染装置，包括：

获取模块，用于获取svg素材；

第一处理模块，用于对svg素材进行打标操作，得到svg元素节点；

第二处理模块，用于对svg元素节点进行扁平化处理，得到目标数组，其中，目标数据是用于存储svg元素的集合；

第三处理模块，用于对目标数组中的svg元素进行处理，生成svg元素的配置项；

渲染模块，用于根据配置项，在视图中按照元素单元的类型渲染表单。

第三方面，本发明提供一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，处理器执行程序时实现第一方面提供的一种表单渲染方法。

第四方面，本发明提供一种非暂态计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现第一方面提供的一种表单渲染方法。

本发明实施例提供了一种表单渲染方法、装置、介质及设备，包括：先获取svg素材，然后对svg素材进行打标操作，得到svg元素节点，再对svg元素节点进行扁平化处理，得到目标数组，其中，目标数据是用于存储svg元素的集合，进而对目标数组中的svg元素进行处理，生成svg元素的配置项，最后根据配置项，在视图中按照元素单元的类型渲染表单。本发明为用户提供了可视化编辑入口，不仅扩展性强，根据不同打标标识进行定制化开发，还可避免侵入式操作导致的元素损坏，以及实时预览编辑效果，提升效率。

附图说明

此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：

图1是本发明实施例提供的一种SVG素材编辑界面的示意图；

图2是本发明一实施例提供的一种表单渲染方法的实现流程图；

图3是本发明实施例提供的SVG编辑入口界面的示意图；

图4是本发明实施例提供的文字类型表单编辑区域的示意图；

图5是本发明实施例提供的图片类型表单编辑区域的示意图；

图6是本发明实施例提供的多图列表的图片表单的示意图；

图7是本发明实施例提供的svg素材画布以及动态表单项的示意图；

图8是本发明另一实施例提供的一种表单渲染方法的实现流程图；

图9是本发明实施例提供的电子设备的示意图。

具体实施方式

为使本申请的目的、技术方案和优点更加清楚，下面将结合本申请具体实施例及相应的附图对本申请技术方案进行清楚、完整地描述。显然，所描述的实施例仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

在一实施例中，如图2所示，本发明提供了一种表单渲染方法，包括以下步骤：

步骤S310：获取svg素材；

步骤S320：对svg素材进行打标操作，得到svg元素节点。

在一种可能的实现方式中，对svg素材进行打标操作，得到svg元素节点，包括：通过svg编辑入口在svg素材的根节点添加标识，得到svg元素节点。

对于svg素材，我们制定了一套规范，该规范限定不同元素种类的书写格式以及打标方法。在素材产出侧按照规范对素材进行生产打标操作。用于后续对元素的匹配识别替换等。下面列举部分规范：

svg素材需在根节点添加元素自定义数据属性[素材类型＝"365svg"]标识，选中素材时如图3所示的工具栏显示SVG编辑入口。

代码示例：

...

</section>

文本元素中#text节点和文本标签不能混排，也就是说文本标签(如<span><i>)、的同一级不能出现#text节点。

错误示例：

正确示例：

素材中不希望在svg编辑器中修改的元素节点，需在元素添加自定义数据属性[是否不可匹配＝"是"]标识。

代码示例：

...

</section>

这个示例中section节点添加了上述标识，将不会被svg编辑器匹配

<img/>标签的width、height属性设置为固定值，根据场景添加元素层叠样式属性object-fit:cover

错误示例：

</svg>

以上代码中，img标签使用了相对尺寸标记width:100％；height:100％，而非约定中提到的固定值。这样会导致在svg编辑器匹配到图片时难以计算图片的实际宽度和高度。

正确示例：

</svg>

用户可新增/删除的图片列表，在列表父级容器元素中添加自定义数据属性[是否是图片分组＝"是"]标识

这个示例中section节点为图片列表的父级容器，容器中添加了上述自定义数据标识。容器一共有三个图片子项。这个素材将会被svg编辑器识别成可复制、删除子项的图片列表(图6)。

素材代码中不能有块级注释，下面是一段块级注释：

<！--替换开门后图片-修改background-image-url括号内图片路径-->

步骤S330：对svg元素节点进行扁平化处理，得到目标数组。

其中，目标数据是用于存储svg元素的集合。

在一种可能的实现方式中，对svg元素节点进行扁平化处理，得到目标数组，包括：采用递归深度优先算法对svg元素节点进行扁平化处理，得到目标数组。

其中，采用递归深度优先算法对svg元素节点进行扁平化处理，得到目标数组，包括：创建空数组，将svg元素节点的集合中的第一个svg元素节点对应的svg元素添加到空数组中，并调用递归函数处理svg元素，得到目标数组。

svg元素的结构为树状结构。为方便后续计算，我们首先对svg元素节点采用递归深度优先算法进行扁平化处理，并剔除一些不必要修改的元素。最终得到一个有效的可操作的svg元素节点的集合。

代码的主要逻辑如下：

创建一个空数组nodes用于存储扁平化后的元素集合。

将入参的第一个元素(根元素root)添加到nodes数组中。

调用名为done的递归函数，并将根元素作为参数传递给它。

done函数的作用是遍历给定元素的子节点，具体逻辑如下：

检查当前节点的子节点数量是否不为零，如不为零则遍历子节点。

对于每个子节点，执行以下操作：

如果子节点的类名为KolEditor-select，则跳过该节点。

如果子节点的id中包含字符串baidu_bookmark，则跳过该节点。

否则，将该子节点添加到nodes数组中，并递归调用done函数，以处理该子节点的子节点。

步骤S340：对目标数组中的svg元素进行处理，生成svg元素的配置项。

在一种可能的实现方式中，对目标数组中的svg元素进行处理，生成svg元素的配置项，包括：利用svg节点类型匹配算法对目标数组中的svg元素进行处理，生成svg元素的配置项。

其中，利用svg节点类型匹配算法对目标数组中的svg元素进行处理，生成svg元素的配置项，包括：将svg元素按照类型划分成元素单元，基于元素单元的类型，提取元素单元的属性数据，生成元素单元的配置项。其中，元素单元至少包括文字、图片和动画。

在上一步骤得到元素集合后，我们将一个svg元素整体划分成粒度更小的单元，单元包括文字、图片、动画，通过对每个单元的元素操作，从而实现对svg元素编辑。

此步骤将根据不同的元素类型，从元素提取属性数据，生成不同的表单配置项。该配置项描述了原始元素的引用信息、元素可编辑的一些基础属性，表单渲染方式等。

完整的表单配置项定义，先配置表单类型、元素引用、定义唯一标识以及各表单类型，具体如下：

Interface DynamicItemBase{

Type:DynamicItemType，//表单类型

TypeVal:number

el:HTMLElement//元素引用

id:number//唯一标识

}

文字类表单

Interface DynamicTextItem extends DynamicItemBase{

textValue:string

textColor:string

textLineheight:number

textFontsize:number

hasAttrFill:boolean,

hasStyleFill:boolean

}

上述配置了表单类型、元素引用、定义唯一标识以及文字类表单，图片类表单、动画类表单以及标题域表单的配置方式与上述类型，此处不再赘述。

具体规则如下：

文字类型匹配规则：元素的第一个子节点是文本类型，并且元素中不包括baidu_bookmark(注：该标识是ueditor库自动为素材添加的标识，此处应忽略)

计算文字颜色，兼容一般文本标签和svg元素内标准文本标签：

const cssStyleDeclaration＝getComputedStyle(el)

const hasAttrFill＝！！el.getAttribute('fill')

const hasStyleFill＝standardSvgText.includes(el.tagName.toLowerCase())

const textColorStr＝hasAttrFill

？el.getAttribute('fill')as string

:hasStyleFill

？cssStyleDeclaration.fill

:cssStyleDeclaration.color

文字类型表单配置项：

图片类型匹配规则：处理两种情况，图片是作为该元素的src属性；图片是任意块级元素的background-img属性

当图片存在于一个列表中，需要查找到data-img-group＝"true"的祖先元素，查找规则：

该方法查找了最近的data-img-group祖先元素ancestor，并从当前节点位置依次向上查找，找到符合条件：父元素为ancestor的元素。记录为groupItemRoot，并将此引用保存在配置项中。

图片类型表单配置项：

动画类型匹配规则：元素名称为animateTransform或animate。

根据元素的dur、begin、values等动画元素特有属性，计算出动画的触发方式、开始时间、持续时间。

动画类型表单配置项：

步骤S350：根据配置项，在视图中按照元素单元的类型渲染表单。

当实现了一个表单渲染引擎，根据上个步骤的配置项，在视图中渲染不同类型的表单。在表单中编辑时，通过元素引用，将修改后的值更新到素材的对应元素上。

如图4所示，文字类型表单编辑区域是根据文字类配置项渲染出的表单，可以修改文字内容、字号、行高、文字颜色等。

如图5所示，图片类型表单编辑区域是根据图片类型表单配置项，实际渲染出的表单。鼠标移入时，展示图片的推荐尺寸，可以修改图片链接、替换图片或对图片进行裁剪操作。图片链接为该表单配置项的imgUrl字段。图6展示了一个多图列表的图片表单，其中每个图片项可以复制或删除。其中复制操作则是利用了表单配置项ancestorRoot和groupItemRoot，处理过程是克隆groupItemRoot元素节点，将该节点插入到ancestorRoot的子元素中。

svg编辑器会绘制出如图7所示的一个视图，其左边为画布区，画布中有一个svg素材。右边为表单区，是根据该素材计算得出的表单配置项绘制出的表单列表，该列表的每一个表单区域则是通过一个表单配置项渲染得出。每一个表单区域保留了svg素材中的一个元素的引用。在对表单编辑时，通过引用关系将修改内容作用到svg素材的对应元素上。

在一实施例中，如图8所示，本发明提供了另一种表单渲染方法，包括以下步骤：素材打标、扁平化处理、svg节点类型匹配算法以及动态渲染表单引擎。

本发明实施例提供了一种表单渲染方法，包括：先获取svg素材，然后对svg素材进行打标操作，得到svg元素节点，再对svg元素节点进行扁平化处理，得到目标数组，其中，目标数据是用于存储svg元素的集合，进而对目标数组中的svg元素进行处理，生成svg元素的配置项，最后根据配置项，在视图中按照元素单元的类型渲染表单。本发明为用户提供了可视化编辑入口，不仅扩展性强，根据不同打标标识进行定制化开发，还可避免侵入式操作导致的元素损坏，以及实时预览编辑效果，提升效率。

以上为本申请的一个或多个实施例提供的一种表单渲染方法，基于同样的思路，本申请还提供了相应的一种表单渲染装置，包括：

获取模块，用于获取svg素材；

创建空数组；

将svg元素按照类型划分成元素单元；

本申请还提供了一种计算机可读介质，该介质存储有计算机程序，计算机程序可用于执行上述图2提供的方法。

本申请还提供了图9所示的一种对应于图2的电子设备的示意结构图。如图9所示，在硬件层面，该电子设备包括处理器、内部总线、网络接口、内存以及非易失性存储器，当然还可能包括其他业务所需要的硬件。处理器从非易失性存储器中读取对应的计算机程序到内存中然后运行，以实现上述图2所述的一种表单渲染方法。当然，除了软件实现方式之外，本申请并不排除其他实现方式，比如逻辑器件抑或软硬件结合的方式等等，也就是说以下处理流程的执行主体并不限定于各个逻辑单元，也可以是硬件或逻辑器件。

在20世纪90年代，对于一个技术的改进可以很明显地区分是硬件上的改进(例如，对二极管、晶体管、开关等电路结构的改进)还是软件上的改进(对于方法流程的改进)。然而，随着技术的发展，当今的很多方法流程的改进已经可以视为硬件电路结构的直接改进。设计人员几乎都通过将改进的方法流程编程到硬件电路中来得到相应的硬件电路结构。因此，不能说一个方法流程的改进就不能用硬件实体模块来实现。例如，可编程逻辑器件(Programmable Logic Device,PLD)(例如现场可编程门阵列(Field Programmable GateArray，FPGA))就是这样一种集成电路，其逻辑功能由用户对器件编程来确定。由设计人员自行编程来把一个数字系统“集成”在一片PLD上，而不需要请芯片制造厂商来设计和制作专用的集成电路芯片。而且，如今，取代手工地制作集成电路芯片，这种编程也多半改用“逻辑编译器(logic compiler)”软件来实现，它与程序开发撰写时所用的软件编译器相类似，而要编译之前的原始代码也得用特定的编程语言来撰写，此称之为硬件描述语言(Hardware Description Language，HDL)，而HDL也并非仅有一种，而是有许多种，如ABEL(Advanced Boolean Expression Language)、AHDL(Altera Hardware DescriptionLanguage)、Confluence、CUPL(Cornell University Programming Language)、HDCal、JHDL(Java Hardware Description Language)、Lava、Lola、MyHDL、PALASM、RHDL(RubyHardware Description Language)等，目前最普遍使用的是VHDL(Very-High-SpeedIntegrated Circuit Hardware Description Language)与Verilog。本领域技术人员也应该清楚，只需要将方法流程用上述几种硬件描述语言稍作逻辑编程并编程到集成电路中，就可以很容易得到实现该逻辑方法流程的硬件电路。

控制器可以按任何适当的方式实现，例如，控制器可以采取例如微处理器或处理器以及存储可由该(微)处理器执行的计算机可读程序代码(例如软件或固件)的计算机可读介质、逻辑门、开关、专用集成电路(Application Specific Integrated Circuit，ASIC)、可编程逻辑控制器和嵌入微控制器的形式，控制器的例子包括但不限于以下微控制器：ARC 625D、Atmel AT91SAM、Microchip PIC18F26K20以及Silicone Labs C8051F320，存储器控制器还可以被实现为存储器的控制逻辑的一部分。本领域技术人员也知道，除了以纯计算机可读程序代码方式实现控制器以外，完全可以通过将方法步骤进行逻辑编程来使得控制器以逻辑门、开关、专用集成电路、可编程逻辑控制器和嵌入微控制器等的形式来实现相同功能。因此这种控制器可以被认为是一种硬件部件，而对其内包括的用于实现各种功能的装置也可以视为硬件部件内的结构。或者甚至，可以将用于实现各种功能的装置视为既可以是实现方法的软件模块又可以是硬件部件内的结构。

上述实施例阐明的系统、装置、模块或单元，具体可以由计算机芯片或实体实现，或者由具有某种功能的产品来实现。一种典型的实现设备为计算机。具体的，计算机例如可以为个人计算机、膝上型计算机、蜂窝电话、相机电话、智能电话、个人数字助理、媒体播放器、导航设备、电子邮件设备、游戏控制台、平板计算机、可穿戴设备或者这些设备中的任何设备的组合。

为了描述的方便，描述以上装置时以功能分为各种单元分别描述。当然，在实施本申请时可以把各单元的功能在同一个或多个软件和/或硬件中实现。

本领域内的技术人员应明白，本申请的实施例可提供为方法、系统、或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本申请是参照根据本申请实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

在一个典型的配置中，计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。

内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)。内存是计算机可读介质的示例。

计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。

还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、商品或者设备中还存在另外的相同要素。

本领域技术人员应明白，本申请的实施例可提供为方法、系统或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本申请可以在由计算机执行的计算机可执行指令的一般上下文中描述，例如程序模块。一般地，程序模块包括执行特定任务或实现特定抽象数据类型的例程、程序、对象、组件、数据结构等等。也可以在分布式计算环境中实践本申请，在这些分布式计算环境中，由通过通信网络而被连接的远程处理设备来执行任务。在分布式计算环境中，程序模块可以位于包括存储设备在内的本地和远程计算机介质中。

本申请中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于系统实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

以上所述仅为本申请的实施例而已，并不用于限制本申请。对于本领域技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本申请的权利要求范围之内。

Claims

1.一种表单渲染方法，其特征在于，包括：

获取svg素材；

对所述svg素材进行打标操作，得到svg元素节点；

对所述svg元素节点进行扁平化处理，得到目标数组，其中，所述目标数组是用于存储svg元素的集合，其中，对所述svg元素节点进行扁平化处理，得到目标数组，包括：采用递归深度优先算法对所述svg元素节点进行扁平化处理，得到目标数组；所述采用递归深度优先算法对所述svg元素节点进行扁平化处理，得到目标数组，包括：创建空数组；将svg元素节点的集合中的第一个svg元素节点对应的svg元素添加到空数组中，并调用递归函数处理所述svg元素，得到目标数组；

对所述目标数组中的svg元素进行处理，生成svg元素的配置项；

根据所述配置项，在视图中按照元素单元的类型渲染表单，其中，所述对所述目标数组中的svg元素进行处理，生成svg元素的配置项，包括：利用svg节点类型匹配算法对所述目标数组中的svg元素进行处理，生成svg元素的配置项；所述利用svg节点类型匹配算法对所述目标数组中的svg元素进行处理，生成svg元素的配置项，包括：将svg元素按照类型划分成元素单元；基于所述元素单元的类型，提取所述元素单元的属性数据，生成所述元素单元的配置项。

2.如权利要求1所述表单渲染方法，其特征在于，所述对所述svg素材进行打标操作，得到svg元素节点，包括：

通过svg编辑入口在所述svg素材的根节点添加标识，得到svg元素节点。

3.如权利要求1所述表单渲染方法，其特征在于，所述元素单元至少包括文字、图片和动画。

4.一种表单渲染装置，其特征在于，包括：

获取模块，用于获取svg素材；

第一处理模块，用于对所述svg素材进行打标操作，得到svg元素节点；

第二处理模块，用于对所述svg元素节点进行扁平化处理，得到目标数组，其中，所述目标数组是用于存储svg元素的集合，其中，对所述svg元素节点进行扁平化处理，得到目标数组，包括：采用递归深度优先算法对所述svg元素节点进行扁平化处理，得到目标数组；所述采用递归深度优先算法对所述svg元素节点进行扁平化处理，得到目标数组，包括：创建空数组；将svg元素节点的集合中的第一个svg元素节点对应的svg元素添加到空数组中，并调用递归函数处理所述svg元素，得到目标数组；

第三处理模块，用于对所述目标数组中的svg元素进行处理，生成svg元素的配置项；

渲染模块，用于根据所述配置项，在视图中按照元素单元的类型渲染表单，其中，所述对所述目标数组中的svg元素进行处理，生成svg元素的配置项，包括：利用svg节点类型匹配算法对所述目标数组中的svg元素进行处理，生成svg元素的配置项；所述利用svg节点类型匹配算法对所述目标数组中的svg元素进行处理，生成svg元素的配置项，包括：将svg元素按照类型划分成元素单元；基于所述元素单元的类型，提取所述元素单元的属性数据，生成所述元素单元的配置项。

5.一种计算机可读存储介质，其特征在于，所述存储介质存储有计算机程序，所述计算机程序被处理器执行时实现上述权利要求1～3任一项所述的方法。

6.一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现上述权利要求1～3任一项所述的方法。