<html>
<body>
<div id="mainInterfaced">
<p><h1>Click For Robo Service</h1></p>
<h1 style="color:green;text-shadow: 2px 1px darkgreen;" onclick="TestingAllowedWordPressTagsForRobotYears()">1:Robo Service</h1>
</div>
<script>
function TestingAllowedWordPressTagsForRobotYears(){document.body.innerHTML='<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="301.61" height="434.13" viewBox="0 0 301.61 434.13"><defs><style>.cls-1{fill:#63635e;}.cls-1,.cls-10,.cls-11,.cls-12,.cls-2,.cls-3,.cls-4,.cls-5,.cls-6,.cls-7,.cls-8,.cls-9{stroke:#000;}.cls-1,.cls-10,.cls-11,.cls-12,.cls-13,.cls-2,.cls-3,.cls-4,.cls-5,.cls-6,.cls-7,.cls-8,.cls-9{stroke-miterlimit:10;}.cls-2{fill:#c6cece;}.cls-3{fill:#fff800;}.cls-4{fill:#fff803;}.cls-5{fill:#fff;}.cls-6,.cls-7{fill:#3e6caf;}.cls-7{opacity:0.58;}.cls-8{fill:#3f15ed;}.cls-9{fill:#19bc19;}.cls-10{fill:#d122d6;}.cls-11{fill:#ea8c11;}.cls-12,.cls-13{fill:#7c7d7f;}.cls-13{stroke:red;stroke-width:3px;}.cls-14{font-size:12px;font-family:MyriadPro-Regular, Myriad Pro;}.cls-15{letter-spacing:0.01em;}.cls-16{letter-spacing:0.02em;}.cls-17{letter-spacing:-0.01em;}.cls-18{letter-spacing:-0.01em;}.cls-19{letter-spacing:-0.01em;}.cls-20{letter-spacing:-0.01em;}</style></defs><g id="EntireRobot"><polygon class="cls-1" points="183.24 235.05 191.21 255.65 214.25 233.59 183.24 235.05"/><polygon class="cls-2" points="118.91 144.67 41.6 144.67 49.6 60.62 126.91 60.62 118.91 144.67"/><rect class="cls-2" x="0.5" y="304.79" width="50.31" height="128.22"/><rect class="cls-2" x="56.02" y="305.41" width="50.31" height="128.22"/><rect class="cls-3" x="62.46" y="75.96" width="9.82" height="15.95"/><rect class="cls-4" x="83.63" y="75.65" width="9.82" height="15.95"/><rect class="cls-5" x="83.94" y="0.5" width="3.07" height="58.9"/><rect class="cls-5" x="67.19" y="106.69" width="20.81" height="22.1"/><rect class="cls-2" x="1.11" y="253.87" width="106.13" height="50.92"/><polygon id="chestStomach" class="cls-2" points="107.25 253.26 1.11 253.87 32.11 144.67 138.25 144.67 107.25 253.26"/><rect class="cls-2" x="115.22" y="145.29" width="30.06" height="76.07"/><rect class="cls-2" x="31.37" y="144.78" width="30.06" height="67.42"/><rect id="rightForeArm" class="cls-2" x="50.81" y="189.18" width="30.06" height="67.42" transform="translate(-157.06 288.73) rotate(-90)"/><ellipse class="cls-6" cx="249.27" cy="229.95" rx="51.84" ry="6.13"/><polygon class="cls-1" points="191.49 211.02 182.57 231.22 214.47 231.89 191.49 211.02"/><ellipse class="cls-7" cx="240.15" cy="206.57" rx="13.5" ry="1.84"/><ellipse class="cls-6" cx="239.98" cy="227.8" rx="13.19" ry="3.37"/><line class="cls-5" x1="253.17" y1="206.94" x2="253.17" y2="227.8"/><line class="cls-5" x1="227.11" y1="206.54" x2="226.79" y2="227.8"/><polyline class="cls-5" points="227.96 217.69 238.39 214.62 245.14 217.69 252.18 216.46"/><rect class="cls-5" x="66.4" y="79.8" width="1.8" height="3.83"/><rect class="cls-5" x="66.4" y="83.83" width="1.8" height="3.83"/><rect class="cls-5" x="68.32" y="82.05" width="1.92" height="3.61" transform="translate(153.54 15.06) rotate(90.34)"/><rect class="cls-5" x="64.54" y="82.03" width="1.92" height="3.61" transform="translate(149.71 18.83) rotate(90.34)"/><rect class="cls-5" x="87.96" y="79.8" width="1.8" height="3.83"/><rect class="cls-5" x="87.96" y="83.83" width="1.8" height="3.83"/><rect class="cls-5" x="89.89" y="82.05" width="1.92" height="3.61" transform="translate(175.23 -6.5) rotate(90.34)"/><rect class="cls-5" x="86.1" y="82.03" width="1.92" height="3.61" transform="translate(171.4 -2.74) rotate(90.34)"/><rect id="M1" class="cls-8" x="67.83" y="107.58" width="2.78" height="20.52"/><rect id="M2" class="cls-9" x="71.57" y="107.49" width="2.78" height="20.52"/><rect id="M3" class="cls-8" x="75.05" y="107.49" width="2.78" height="20.52"/><rect id="M4" class="cls-10" x="78.35" y="107.49" width="2.78" height="20.52"/><rect id="M5" class="cls-8" x="81.83" y="107.32" width="2.78" height="20.52"/><rect id="M6" class="cls-11" x="84.96" y="107.49" width="2.78" height="20.52"/><path class="cls-7" d="M227.64,208l11.8,1.57,12.91-1.37.2,19.63a7.33,7.33,0,0,1-1.24,1,8,8,0,0,1-4,1.24,45.42,45.42,0,0,1-6.19.53,46.41,46.41,0,0,1-6.2-.33,15.24,15.24,0,0,1-3.91-.46,14.67,14.67,0,0,1-3.13-1.17l-.46-.91Z"/><rect id="leftForeArm" class="cls-2" x="134.24" y="198.38" width="30.06" height="67.42" transform="translate(-82.82 381.37) rotate(-90)"/></g><rect id="RemoteFlipper" class="cls-12" x="176.35" y="19.58" width="89.74" height="134.16"/><g id="serve"><rect class="cls-13" x="177.74" y="21.67" width="41.74" height="66.09"/><text class="cls-14" transform="translate(186.09 55.23)"><tspan class="cls-15">S</tspan><tspan x="5.99" y="0">e</tspan><tspan class="cls-16" x="12" y="0">r</tspan><tspan class="cls-17" x="16.22" y="0">v</tspan><tspan x="21.88" y="0">e</tspan></text></g><g id="leave"><rect class="cls-13" x="221.82" y="21.57" width="41.74" height="66.09"/><text class="cls-14" transform="translate(230.17 55.13)"><tspan class="cls-18">L</tspan><tspan x="5.5" y="0">e</tspan><tspan class="cls-19" x="11.51" y="0">a</tspan><tspan class="cls-17" x="17.2" y="0">v</tspan><tspan x="22.85" y="0">e</tspan></text></g><g id="dance"><rect class="cls-13" x="178.69" y="87.66" width="41.74" height="66.09"/><text class="cls-14" transform="translate(187.04 121.22)">Dan<tspan class="cls-20" x="20.44" y="0">c</tspan><tspan x="25.74" y="0">e</tspan></text></g><g id="sober"><rect class="cls-13" x="222.66" y="87.66" width="41.74" height="66.09"/><text class="cls-14" transform="translate(231.01 121.22)"><tspan class="cls-15">S</tspan><tspan x="5.99" y="0">ober</tspan><tspan x="0" y="14.4">Up</tspan></text></g></svg>';
setTimeout(function(){document.querySelector("#serve").setAttribute('onclick','serve()');document.querySelector("#serve").setAttribute('onmouseover','serveMouseOver()');document.querySelector("#serve").setAttribute('onmouseout','serveMouseOut()');document.querySelector("#leave").setAttribute('onclick','leave()');document.querySelector("#leave").setAttribute('onmouseover','leaveMouseOver()');document.querySelector("#leave").setAttribute('onmouseout','leaveMouseOut()');document.querySelector("#dance").setAttribute('onclick','dance()');document.querySelector("#dance").setAttribute('onmouseover','danceMouseOver()');document.querySelector("#dance").setAttribute('onmouseout','danceMouseOut()');document.querySelector("#sober").setAttribute('onclick','sober()');document.querySelector("#sober").setAttribute('onmouseover','soberMouseOver()');document.querySelector("#sober").setAttribute('onmouseout','soberMouseOut()');},1);}
function serveMouseOver(){document.querySelector("#serve").style.stroke='blue';}
function serveMouseOut(){document.querySelector("#serve").style.stroke='green';}
function leaveMouseOver(){document.querySelector("#leave").style.stroke='blue';}
function leaveMouseOut(){document.querySelector("#leave").style.stroke='green';}
function danceMouseOver(){document.querySelector("#dance").style.stroke='blue';}
function danceMouseOut(){document.querySelector("#dance").style.stroke='green';}
function soberMouseOver(){document.querySelector("#sober").style.stroke='blue';}
function soberMouseOut(){document.querySelector("#sober").style.stroke='green';}
function serve(){document.querySelector("#EntireRobot").style.transition="transform 3s";document.querySelector("#EntireRobot").style.transform="translate(50px,0px)"}
function leave(){document.querySelector("#EntireRobot").style.transition="transform 3s";document.querySelector("#EntireRobot").style.transform="translate(-500px,0px)"}
function dance(){document.querySelector("#rightForeArm").style.transition='transform 3s';document.querySelector("#rightForeArm").style.transformOrigin= "center center";document.querySelector("#rightForeArm").style.transform='rotate(35deg)'}
function sober(){alert(789)}
</script>
</body>
</html>情况：当我点击跳舞按钮让机器人跳舞时，手臂飞走了，而不是停留在原地旋转。我使用 Transform Origin 是因为我认为这是原地旋转的方式。我使用转移原点：中心。也许它不起作用，因为我声明了传输原点并在同一个函数中旋转了它？任何帮助都是极好的。谢谢