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

权利要求书

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中任一项所述方法。