SVG文件使用操作

SVG文件使用操作

1. 制作方法
   使用 illustrator 生成svg文件，选择”文件”—"导出”存储为svg格式，弹出svg选项框，生成svg代码。
   

2. 动画格式
   2.1 三种动画状态
   svg文件一般有三种动画状态，包括静止状态、告警状态、运转状态。有些文件还包括离线在线状态（如风冷热泵、空气源热泵）、开启关闭（如灯泡、灯开关）。
   每个svg代码里的状态统一设置：
   静止：<g id=”BASE"> ，没有动画显示控制。
   运转： 控制运转状态的不显示。
   告警： 控制告警状态的不显示。
   与运转重叠部分： 控制默认状态的显示。
   控制设备开关： 控制开关状态的关闭。
   每种状态的切换就是进行代码替换none(不显示)/block(显示)。
   设备静止的代码 ;运转打开时代码修改为 ；告警打开代码修改为 告警状态打开；如果三种状态下，有跟运行时重叠的部分 控制默认状态的不显示。
   2.2 svg代码基本格式
   svg代码基本格式如下：

<svg id="xxx" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="192" height="214.82" viewBox="0 0 192 214.82">
    <style></style>
<g id=”BASE”>
……
</g>
<!----设备静止无动画>
    <g id="ANI" style="display:none">
	<!----设备运转动画，如果没有运行状态，这块就无---->
	......
    </g>
    <g id="STA" style="display:block">
	<!----设备开关动画，若与运行时没重叠的部分，这块就无---->
	.......
    </g>
    <g id="ALERT" style="display:none">
	<!----设备告警动画，如果没有告警状态，这块就无---->
	.......
	</g>
</svg>

2.3不同状态的svg文件实例

一种状态的默认为静止状态，只有代码<g id=”BASE">，如生活水箱.svg。
两种状态的有告警状态和开关状态。告警状态如: 照明柜.svg，包含代码<g id=”BASE">和<g id=”ALERT" style=”display:block”>；开关状态如：灯泡.svg，包含代码<g id=”BASE">和<g id=”STA" style=”display:block”>。
三种状态的如：冷却塔.svg, 排风机.svg, 循环泵.svg(不包含 )。