SVG文件使用操作
-
制作方法
使用 illustrator 生成svg文件，选择”文件”—"导出”存储为svg格式，弹出svg选项框，生成svg代码。
-
动画格式
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(不包含
