mxGraph的使用风扇的旋转

Question

我现在用mxGraph整合进vue

如图已经搞好了一个风扇，将要实现的是vue项目作为mqtt客户端，mqtt服务端会定时推送空调状态，当解析json数据字段为0风扇停止转动(img标签换成不转的)，字段为1风扇继续转动，现在点击保存后就得到一个svg,这个svg并没有id来标识，我要怎么才能动态改变风扇的状态呢？

最终实现

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="563px" height="233px" viewBox="-0.5 -0.5 563 233">
    <defs/>
    <g>
        <rect x="1" y="1" width="70" height="30" fill="#ffffff" stroke="#000000" pointer-events="none"/>
        <rect x="181" y="131" width="80" height="30" fill="#ffffff" stroke="#000000" pointer-events="none"/>
        <g fill="#000000" font-family="Helvetica" pointer-events="none" text-anchor="middle" font-size="12px">
            <text x="220.5" y="150.5">World!</text>
        </g>
        <path d="M 57.35 31 L 194.44 127.34" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/>
        <path d="M 198.74 130.36 L 191 129.2 L 194.44 127.34 L 195.02 123.47 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/>
        <rect x="311" y="1" width="250" height="230" fill="#4d4d4d" stroke="none" pointer-events="none"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 248px; height: 1px; padding-top: 116px; margin-left: 312px;">
                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: none; white-space: normal; word-wrap: normal; ">
                                <img src="https://www.hiwooiot.cn/drawHiWoo2/img/statePictures/wind/stateLinkage-1_1.gif" width="200" height="200"/>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="436" y="120" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">[Not supported by viewer]</text>
            </switch>
        </g>
    </g>
</svg>

<mxGraphModel dx="828" dy="495" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169">
  <root>
    <mxCell id="0" />
    <mxCell id="1" parent="0" />
    <mxCell id="2" value="" parent="1" vertex="1">
      <mxGeometry x="20" y="20" width="70" height="30" as="geometry" />
    </mxCell>
    <mxCell id="3" value="World!" parent="1" vertex="1">
      <mxGeometry x="200" y="150" width="80" height="30" as="geometry" />
    </mxCell>
    <mxCell id="4" value="" parent="1" source="2" target="3" edge="1">
      <mxGeometry relative="1" as="geometry" />
    </mxCell>
    <object label="&lt;img src=&quot;https://www.hiwooiot.cn/drawHiWoo2/img/statePictures/wind/stateLinkage-1_1.gif&quot; width=&quot;200&quot; height=&quot;200&quot;&gt;" ddd="123" ceshi="kkk" id="8">
      <mxCell style="rounded=0;whiteSpace=wrap;html=1;fillColor=#4D4D4D;strokeColor=none;" parent="1" vertex="1">
        <mxGeometry x="330" y="20" width="250" height="230" as="geometry" />
      </mxCell>
    </object>
  </root>
</mxGraphModel>