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

说明书

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

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

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