CN110288685B - 一种基于svg遮罩功能的齿轮模式数据展示方法以及装置 - Google Patents

Abstract

本公开是关于一种基于svg遮罩功能的齿轮模式数据展示方法、装置、电子设备以及计算机可读存储介质。其中，该方法包括：根据效果图导出素材图片，所述素材图片为svg格式，包括高光层(light.svg)，遮罩层(mask.svg)，纹理层(Texture.svg)，投影层(shadow.svg)；使用mash元素定义遮罩层及g元素，并通过mark属性应用遮罩层对所述g元素实行遮罩效果；利用css3为遮罩层的g元素设置旋转动画参数，所述参数包括但不限于旋转发现、旋转速度；通过伪类和元素背景图的形式链接相应图片的方式添加高光层及投影层，实现基于svg遮罩功能的齿轮模式数据的展示。本公开通过基于svg遮罩功能的齿轮模式的展示，提高了有效数据在超大屏幕上进行展示效果，减少了展示计算负担。

Description

一种基于svg遮罩功能的齿轮模式数据展示方法以及装置

背景技术

伴随着大数据时代的到来，数据大屏可视化展示技术逐渐成为热门。数据可视化，可以增强数据的展示效果，方便用户更加直观的观察数据，进而跟踪数据及时发现设备运行当中出现的问题和隐藏的信息。

数据可视化当中数据的展现方式已经开始多样化，一是为了更清晰的分析数据，二是为了增强大屏的视觉效果，大屏中数据的展现方式已经不再局限于普通的柱状图，饼状图，曲线图等等这些传统的数据展示方法了。

基于本实例的效果在此之前一般会采用引用png图片或是svg图片的方式使用css3实现齿轮的旋转，以此来实现数据可视化的效果。

但是如果这样实现会存在以下问题：

(1)png格式图片，如果选用原尺寸在高清屏下会出现素材模糊的情况，如果使用2X图片就会存在图片文件过大，加载时间长的问题。

(2)svg格式图片，此格式不存在高清屏模糊的情况，但是无法避免图片尺寸过大的问题。

(3)这两种实现方法都不能解决在保持齿轮明暗效果的情况下进行旋转的问题。

由上可知，需要提供一种或多种至少能够解决上述问题的技术方案。

需要说明的是，在上述背景技术部分公开的信息仅用于加强对本公开的背景的理解，因此可以包括不构成对本领域普通技术人员已知的现有技术的信息。

发明内容

本公开的目的在于提供一种基于svg遮罩功能的齿轮模式数据展示方法、装置、电子设备以及计算机可读存储介质，进而至少在一定程度上克服由于相关技术的限制和缺陷而导致的一个或者多个问题。

根据本公开的一个方面，提供一种基于svg遮罩功能的齿轮模式数据展示方法，包括：

素材图片预处理步骤，根据效果图导出素材图片，所述素材图片为svg格式，包括高光层(light.svg)，遮罩层(mask.svg)，纹理层(Texture.svg)，投影层(shadow.svg)；

遮罩层定义应用步骤，使用mash元素定义遮罩层及g元素，并通过mark属性应用遮罩层对所述g元素实行遮罩效果；

遮罩层动画设置步骤，利用css3为遮罩层的g元素设置旋转动画参数，所述参数包括但不限于旋转发现、旋转速度；

高光层及投影层添加步骤，通过伪类和元素背景图的形式链接相应图片的方式添加高光层及投影层，实现基于svg遮罩功能的齿轮模式数据的展示。

在本公开的一种示例性实施例中，所述遮罩层定义应用步骤还包括：

所述g元素包含的子元素为一个子图片，所述子图片为纹理层(Texture.svg)图片，可以实现展示纹理和明暗效果。

在本公开的一种示例性实施例中，所述遮罩层动画设置步骤还包括：

所述旋转动画参数可以采用多样式名的方法，进行不同的样式组合，实现不同的动画效果。

在本公开的一种示例性实施例中，所述高光层及投影层添加步骤还包括：

通过伪类和元素背景图的形式链接相应图片的方式添加高光层及投影层，可以减少页面中元素节点，便于页面维护和管理。

在本公开的一种示例性实施例中，所述方法还包括：

添加文字层：在svg元素下添加文字，文字颜色为渐变色，使用text元素显示文字内容。

在本公开的一种示例性实施例中，所述方法还包括：

所述素材图片每个齿轮都是一个单独的svg块，内部包含各种元素，包括文字，遮罩，纹理层，遮罩层采用path路径的形式进行引用，减少了一次图片文件的请求，只需要一次纹理层图片的请求，纹理层图片展示纹理和明暗效果，文件占用储存和调用空间均较小。

在本公开的一个方面，提供一种基于svg遮罩功能的齿轮模式数据展示装置，包括：

素材图片预处理模块，用于根据效果图导出素材图片，所述素材图片为svg格式，包括高光层(light.svg)，遮罩层(mask.svg)，纹理层(Texture.svg)，投影层(shadow.svg)；

遮罩层定义应用模块，用于使用mash元素定义遮罩层及g元素，并通过mark属性应用遮罩层对所述g元素实行遮罩效果；

遮罩层动画设置模块，用于利用css3为遮罩层的g元素设置旋转动画参数，所述参数包括但不限于旋转发现、旋转速度；

高光层及投影层添加模块，用于通过伪类和元素背景图的形式链接相应图片的方式添加高光层及投影层，实现基于svg遮罩功能的齿轮模式数据的展示。

在本公开的一个方面，提供一种电子设备，包括：

处理器；以及

存储器，所述存储器上存储有计算机可读指令，所述计算机可读指令被所述处理器执行时实现根据上述任意一项所述的方法。

在本公开的一个方面，提供一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现根据上述任意一项所述的方法。

本公开的示例性实施例中的基于svg遮罩功能的齿轮模式数据展示方法，根据效果图导出素材图片，所述素材图片为svg格式，包括高光层(light.svg)，遮罩层(mask.svg)，纹理层(Texture.svg)，投影层(shadow.svg)；使用mash元素定义遮罩层及g元素，并通过mark属性应用遮罩层对所述g元素实行遮罩效果；利用css3为遮罩层的g元素设置旋转动画参数，所述参数包括但不限于旋转发现、旋转速度；通过伪类和元素背景图的形式链接相应图片的方式添加高光层及投影层，实现基于svg遮罩功能的齿轮模式数据的展示。本公开通过基于svg遮罩功能的齿轮模式的展示，提高了有效数据在超大屏幕上进行展示效果，减少了展示计算负担。利用svg遮罩功能和css3动画效果实现齿轮旋转的方式展示数据，旋转中的齿轮实现了保持正确的明暗效果的目的。而且大大减少了图片文件的请求次数，和图片文件的大小。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本公开。

附图说明

通过参照附图来详细描述其示例实施例，本公开的上述和其它特征及优点将变得更加明显。

图1示出了根据本公开一示例性实施例的基于svg遮罩功能的齿轮模式数据展示方法的流程图；

图2示出了根据本公开一示例性实施例的基于svg遮罩功能的齿轮模式数据展示方法的展示效果图；

图3示出了根据本公开一示例性实施例的基于svg遮罩功能的齿轮模式数据展示装置的示意框图；

图4示意性示出了根据本公开一示例性实施例的电子设备的框图；以及

图5示意性示出了根据本公开一示例性实施例的计算机可读存储介质的示意图。

具体实施方式

现在将参考附图更全面地描述示例实施例。然而，示例实施例能够以多种形式实施，且不应被理解为限于在此阐述的实施例；相反，提供这些实施例使得本公开将全面和完整，并将示例实施例的构思全面地传达给本领域的技术人员。在图中相同的附图标记表示相同或类似的部分，因而将省略对它们的重复描述。

此外，所描述的特征、结构或特性可以以任何合适的方式结合在一个或更多实施例中。在下面的描述中，提供许多具体细节从而给出对本公开的实施例的充分理解。然而，本领域技术人员将意识到，可以实践本公开的技术方案而没有所述特定细节中的一个或更多，或者可以采用其它的方法、组元、材料、装置、步骤等。在其它情况下，不详细示出或描述公知结构、方法、装置、实现、材料或者操作以避免模糊本公开的各方面。

附图中所示的方框图仅仅是功能实体，不一定必须与物理上独立的实体相对应。即，可以采用软件形式来实现这些功能实体，或在一个或多个软件硬化的模块中实现这些功能实体或功能实体的一部分，或在不同网络和/或处理器装置和/或微控制器装置中实现这些功能实体。

在本示例实施例中，首先提供了一种基于svg遮罩功能的齿轮模式数据展示方法；参考图1中所示，该基于svg遮罩功能的齿轮模式数据展示方法可以包括以下步骤：

素材图片预处理步骤S110，根据效果图导出素材图片，所述素材图片为svg格式，包括高光层(light.svg)，遮罩层(mask.svg)，纹理层(Texture.svg)，投影层(shadow.svg)；

遮罩层定义应用步骤S120，使用mash元素定义遮罩层及g元素，并通过mark属性应用遮罩层对所述g元素实行遮罩效果；

遮罩层动画设置步骤S130，利用css3为遮罩层的g元素设置旋转动画参数，所述参数包括但不限于旋转发现、旋转速度；

高光层及投影层添加步骤S140，通过伪类和元素背景图的形式链接相应图片的方式添加高光层及投影层，实现基于svg遮罩功能的齿轮模式数据的展示。

根据本示例实施例中的基于svg遮罩功能的齿轮模式数据展示方法，通过基于svg遮罩功能的齿轮模式的展示，提高了有效数据在超大屏幕上进行展示效果，减少了展示计算负担。利用svg遮罩功能和css3动画效果实现齿轮旋转的方式展示数据，旋转中的齿轮实现了保持正确的明暗效果的目的。而且大大减少了图片文件的请求次数，和图片文件的大小。

下面，将对本示例实施例中的基于svg遮罩功能的齿轮模式数据展示方法进行进一步的说明。

在素材图片预处理步骤S110中，可以根据效果图导出素材图片，所述素材图片为svg格式，包括高光层(light.svg)，遮罩层(mask.svg)，纹理层(Texture.svg)，投影层(shadow.svg)。

在本示例的实施例中，基于svg遮罩功能的齿轮模式数据展示方法就是利用svg的遮罩功能裁剪具有明暗效果的背景图，并实现遮罩层的旋转，从而使得齿轮在保持明暗效果的前提下实现旋转的动态效果。

在遮罩层定义应用步骤S120中，可以使用mash元素定义遮罩层及g元素，并通过mark属性应用遮罩层对所述g元素实行遮罩效果。

在本示例的实施例中，所述遮罩层定义应用步骤还包括：

所述g元素包含的子元素为一个子图片，所述子图片为纹理层(Texture.svg)图片，可以实现展示纹理和明暗效果。

在本示例的实施例中，处理遮罩层图片，使用编辑器打开遮罩层图片，获取path路径相关数据，一般格式为<path d＝‘路径’>，使用<mask>元素定义遮罩层，<mask>元素所包含的子元素可以是任何可视化元素，甚至是<g>元素。这些可视化的子元素都必须带上透明度的定义，因为<mask>元素是通过透明度来控制图像与背景的遮罩效果的。定义mark元素id为MaskShape方便以后调用。这个mark元素下是一个<g>元素，g元素内是一段path，是通过编辑mask.svg获取的路径文件。随后可以使用mask属性引用该遮罩层。代码如下：

使用遮罩层：定义一个g元素，通过mark属性应用遮罩层对这个g元素实行遮罩效果，该g元素包含的子元素是一个图片(纹理层Texture.svg)，代码如下：

在遮罩层动画设置步骤S130中，可以利用css3为遮罩层的g元素设置旋转动画参数，所述参数包括但不限于旋转发现、旋转速度。

在本示例的实施例中，所述遮罩层动画设置步骤还包括：

所述旋转动画参数可以采用多样式名的方法，进行不同的样式组合，实现不同的动画效果。

在本示例的实施例中，为遮罩层设置动画：利用css3为遮罩层的g元素实现旋转动画，需要先定义动画效果，旋转分为顺时针，逆时针，快速，中速，慢速，定义如下：

采用多样式名的方法，进行不同的样式组合，实现不同的动画效果，例如：顺时针快速旋转class＝"gearClockwise speed_fast"。

为遮罩层mark元素下的g添加动画样式名，class＝"gearClockwise"，如果不添加速度样式，默认是20s完成旋转动画效果。

在高光层及投影层添加步骤S140中，可以通过伪类和元素背景图的形式链接相应图片的方式添加高光层及投影层，实现基于svg遮罩功能的齿轮模式数据的展示。

在本示例的实施例中，所述高光层及投影层添加步骤还包括：

通过伪类和元素背景图的形式链接相应图片的方式添加高光层及投影层，可以减少页面中元素节点，便于页面维护和管理。

在本示例的实施例中，添加高光层和投影层：高光层和投影层是采用伪类和元素背景图的形式链接相应的图片，优势是可以减少页面中元素节点，便于页面维护和管理。代码如下：

在本示例的实施例中，所述方法还包括：

添加文字层：在svg元素下添加文字，文字颜色为渐变色，使用text元素显示文字内容。

在本示例的实施例中，(6)添加文字层：在svg元素下添加文字，文字颜色为渐变色，使用text元素显示文字内容，<text x＝"50％"y＝"50％"text-anchor＝"middle"

dominant-baseline＝"middle">文字</text>，

使用linearGradient定义渐变色：

使用fill属性在文字层使用定义的渐变色fill＝"url(#color1)"。

在本示例的实施例中，所述方法还包括：

所述素材图片每个齿轮都是一个单独的svg块，内部包含各种元素，包括文字，遮罩，纹理层，遮罩层采用path路径的形式进行引用，减少了一次图片文件的请求，只需要一次纹理层图片的请求，纹理层图片展示纹理和明暗效果，文件占用储存和调用空间均较小，一般在2KB左右。如果采用之前直接引用svg图片的方式，一个齿轮素材图就达到30KB。

在本示例的实施例中，如图2所示，为某项目的齿轮模式数据展示效果图，由图可知，本公开丰富了大屏数据展示，根据设计创意在技术上更接近创意效果的实现创意的落地。从优化图片文件请求次数和图片文件大小优化的方面看，极大的提高了性能。

需要说明的是，尽管在附图中以特定顺序描述了本公开中方法的各个步骤，但是，这并非要求或者暗示必须按照该特定顺序来执行这些步骤，或是必须执行全部所示的步骤才能实现期望的结果。附加的或备选的，可以省略某些步骤，将多个步骤合并为一个步骤执行，以及/或者将一个步骤分解为多个步骤执行等。

此外，在本示例实施例中，还提供了一种基于svg遮罩功能的齿轮模式数据展示装置。参照图3所示，该基于svg遮罩功能的齿轮模式数据展示装置200可以包括：素材图片预处理模块210、遮罩层定义应用模块220、遮罩层动画设置模块230以及高光层及投影层添加模块240。其中：

素材图片预处理模块210，用于根据效果图导出素材图片，所述素材图片为svg格式，包括高光层(light.svg)，遮罩层(mask.svg)，纹理层(Texture.svg)，投影层(shadow.svg)；

遮罩层定义应用模块220，用于使用mash元素定义遮罩层及g元素，并通过mark属性应用遮罩层对所述g元素实行遮罩效果；

遮罩层动画设置模块230，用于利用css3为遮罩层的g元素设置旋转动画参数，所述参数包括但不限于旋转发现、旋转速度；

高光层及投影层添加模块240，用于通过伪类和元素背景图的形式链接相应图片的方式添加高光层及投影层，实现基于svg遮罩功能的齿轮模式数据的展示。

上述中各基于svg遮罩功能的齿轮模式数据展示装置模块的具体细节已经在对应的音频段落识别方法中进行了详细的描述，因此此处不再赘述。

应当注意，尽管在上文详细描述中提及了基于svg遮罩功能的齿轮模式数据展示装置200的若干模块或者单元，但是这种划分并非强制性的。实际上，根据本公开的实施方式，上文描述的两个或更多模块或者单元的特征和功能可以在一个模块或者单元中具体化。反之，上文描述的一个模块或者单元的特征和功能可以进一步划分为由多个模块或者单元来具体化。

此外，在本公开的示例性实施例中，还提供了一种能够实现上述方法的电子设备。

所属技术领域的技术人员能够理解，本发明的各个方面可以实现为系统、方法或程序产品。因此，本发明的各个方面可以具体实现为以下形式，即：完全的硬件实施例、完全的软件实施例(包括固件、微代码等)，或硬件和软件方面结合的实施例，这里可以统称为“电路”、“模块”或“系统”。

下面参照图4来描述根据本发明的这种实施例的电子设备300。图3显示的电子设备300仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。

如图4所示，电子设备300以通用计算设备的形式表现。电子设备300的组件可以包括但不限于：上述至少一个处理单元310、上述至少一个存储单元320、连接不同系统组件(包括存储单元320和处理单元310)的总线330、显示单元340。

其中，所述存储单元存储有程序代码，所述程序代码可以被所述处理单元310执行，使得所述处理单元310执行本说明书上述“示例性方法”部分中描述的根据本发明各种示例性实施例的步骤。例如，所述处理单元310可以执行如图1中所示的步骤S110至步骤S140。

存储单元320可以包括易失性存储单元形式的可读介质，例如随机存取存储单元(RAM)3201和/或高速缓存存储单元3202，还可以进一步包括只读存储单元(ROM)3203。

存储单元320还可以包括具有一组(至少一个)程序模块3205的程序/实用工具3204，这样的程序模块3205包括但不限于：操作系统、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。

总线330可以为表示几类总线结构中的一种或多种，包括存储单元总线或者存储单元控制器、外围总线、图形加速端口、处理单元或者使用多种总线结构中的任意总线结构的局域总线。

电子设备300也可以与一个或多个外部设备370(例如键盘、指向设备、蓝牙设备等)通信，还可与一个或者多个使得用户能与该电子设备300交互的设备通信，和/或与使得该电子设备300能与一个或多个其它计算设备进行通信的任何设备(例如路由器、调制解调器等等)通信。这种通信可以通过输入/输出(I/O)接口350进行。并且，电子设备300还可以通过网络适配器360与一个或者多个网络(例如局域网(LAN)，广域网(WAN)和/或公共网络，例如因特网)通信。如图所示，网络适配器360通过总线330与电子设备300的其它模块通信。应当明白，尽管图中未示出，可以结合电子设备300使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理单元、外部磁盘驱动阵列、RAID系统、磁带驱动器以及数据备份存储系统等。

通过以上的实施例的描述，本领域的技术人员易于理解，这里描述的示例实施例可以通过软件实现，也可以通过软件结合必要的硬件的方式来实现。因此，根据本公开实施例的技术方案可以以软件产品的形式体现出来，该软件产品可以存储在一个非易失性存储介质(可以是CD-ROM，U盘，移动硬盘等)中或网络上，包括若干指令以使得一台计算设备(可以是个人计算机、服务器、终端装置、或者网络设备等)执行根据本公开实施例的方法。

在本公开的示例性实施例中，还提供了一种计算机可读存储介质，其上存储有能够实现本说明书上述方法的程序产品。在一些可能的实施例中，本发明的各个方面还可以实现为一种程序产品的形式，其包括程序代码，当所述程序产品在终端设备上运行时，所述程序代码用于使所述终端设备执行本说明书上述“示例性方法”部分中描述的根据本发明各种示例性实施例的步骤。

参考图5所示，描述了根据本发明的实施例的用于实现上述方法的程序产品400，其可以采用便携式紧凑盘只读存储器(CD-ROM)并包括程序代码，并可以在终端设备，例如个人电脑上运行。然而，本发明的程序产品不限于此，在本文件中，可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。

所述程序产品可以采用一个或多个可读介质的任意组合。可读介质可以是可读信号介质或者可读存储介质。可读存储介质例如可以为但不限于电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。

计算机可读信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了可读程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。可读信号介质还可以是可读存储介质以外的任何可读介质，该可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。

可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于无线、有线、光缆、RF等等，或者上述的任意合适的组合。

可以以一种或多种程序设计语言的任意组合来编写用于执行本发明操作的程序代码，所述程序设计语言包括面向对象的程序设计语言—诸如Java、C++等，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算设备上执行、部分地在用户设备上执行、作为一个独立的软件包执行、部分在用户计算设备上部分在远程计算设备上执行、或者完全在远程计算设备或服务器上执行。在涉及远程计算设备的情形中，远程计算设备可以通过任意种类的网络，包括局域网(LAN)或广域网(WAN)，连接到用户计算设备，或者，可以连接到外部计算设备(例如利用因特网服务提供商来通过因特网连接)。

此外，上述附图仅是根据本发明示例性实施例的方法所包括的处理的示意性说明，而不是限制目的。易于理解，上述附图所示的处理并不表明或限制这些处理的时间顺序。另外，也易于理解，这些处理可以是例如在多个模块中同步或异步执行的。

本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本公开的其他实施例。本申请旨在涵盖本公开的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本公开的真正范围和精神由权利要求指出。

应当理解的是，本公开并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本公开的范围仅由所附的权利要求来限。

Claims (9)

1.一种基于svg遮罩功能的齿轮模式数据展示方法，其特征在于，所述方法包括：

素材图片预处理步骤，根据效果图导出素材图片，所述素材图片为svg格式，包括高光层light.svg，遮罩层mask.svg，纹理层texture.svg，投影层shadow.svg；

遮罩层定义应用步骤，使用mash元素定义遮罩层及g元素，并通过mark属性应用遮罩层对所述g元素实行遮罩效果；

遮罩层动画设置步骤，利用css3为遮罩层的g元素设置旋转动画参数，所述参数为旋转发现、旋转速度；

高光层及投影层添加步骤，通过伪类和元素背景图的形式链接相应图片的方式添加高光层及投影层，实现基于svg遮罩功能的齿轮模式数据的展示。

2.如权利要求1所述的方法，其特征在于，所述遮罩层定义应用步骤还包括：

所述g元素包含的子元素为一个子图片，所述子图片为纹理层texture.svg图片，可以实现展示纹理和明暗效果。

3.如权利要求1所述的方法，其特征在于，所述遮罩层动画设置步骤还包括：

所述旋转动画参数可以采用多样式名的方法，进行不同的样式组合，实现不同的动画效果。

4.如权利要求1所述的方法，其特征在于，所述高光层及投影层添加步骤还包括：

通过伪类和元素背景图的形式链接相应图片的方式添加高光层及投影层，可以减少页面中元素节点，便于页面维护和管理。

5.如权利要求1所述的方法，其特征在于，所述方法还包括：

添加文字层：在svg元素下添加文字，文字颜色为渐变色，使用text元素显示文字内容。

6.如权利要求1所述的方法，其特征在于，所述方法还包括：

所述素材图片每个齿轮都是一个单独的svg块，内部包含各种元素，包括文字，遮罩，纹理层，遮罩层采用path路径的形式进行引用，减少了一次图片文件的请求，只需要一次纹理层图片的请求，纹理层图片展示纹理和明暗效果，文件占用储存和调用空间均较小。

7.一种基于svg遮罩功能的齿轮模式数据展示装置，其特征在于，所述装置包括：

素材图片预处理模块，用于根据效果图导出素材图片，所述素材图片为svg格式，包括高光层light.svg，遮罩层mask.svg，纹理层texture.svg，投影层shadow.svg；

遮罩层定义应用模块，用于使用mash元素定义遮罩层及g元素，并通过mark属性应用遮罩层对所述g元素实行遮罩效果；

遮罩层动画设置模块，用于利用css3为遮罩层的g元素设置旋转动画参数，所述参数为旋转发现、旋转速度；

高光层及投影层添加模块，用于通过伪类和元素背景图的形式链接相应图片的方式添加高光层及投影层，实现基于svg遮罩功能的齿轮模式数据的展示。

8.一种电子设备，其特征在于，包括

处理器；以及

存储器，所述存储器上存储有计算机可读指令，所述计算机可读指令被所述处理器执行时实现根据权利要求1至6中任一项所述的方法。

9.一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现根据权利要求1至6中任一项所述方法。

Images