javascript - 相对于其父对象旋转 svg 对象

Question

根据其父对象旋转 svg 对象。我需要旋转 L3 对象 w.r.t 它的父对象 Arm。请帮助我...

<强> Demo

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
  <title>test</title>
  <g id="canvas">
    <circle class="cls-1" cx="150" cy="150" r="150"/>
  </g>
  <g id="body">
    <circle class="cls-2" cx="150" cy="150" r="71.99"/>
    <circle class="cls-3" cx="150" cy="150" r="59.77"/>
    <circle class="cls-4" cx="150" cy="150" r="29.7"/>
  </g>
  <g id="Arm1" transform="translate(0, 0) rotate(0 150 150)">
    <g id="Arm-L1">
      <path class="cls-5" d="M197.74,143.3h-37.9a9.4,9.4,0,1,0-.74,14.28h38.64Z"/>
    </g>
    <g id="Arm-L2-Circle">
      <circle class="cls-6" cx="198.87" cy="150.06" r="9.4"/>
    </g>
    <g id="Arm-L2">
      <rect class="cls-6" x="204.14" y="142.92" width="32.71" height="14.29"/>
    </g>
    <g id="Arm-L3"  cx="204.14" cy="142.92">
      <path d="M282.43,137.82v-7.88H263.69l-7.46,13.23H242.17a9.4,9.4,0,1,0-.74,14.29h15.15l7.11,12.6h18.74v-7.88H268.3L261.43,150l6.87-12.18Z"/>
    </g>
  </g>
</svg>

 $('#L3').on('change input', function() {
   var rotateBy = $(this).val();
   $('#Arm-L3').attr('transform', 'translate(0, 0) rotate(' + rotateBy + ' 150 150)');
 });

Answer 1

有效

$('#L3').on('更改输入', function() {
varrotateBy = $(this).val();
$('#Arm-L3').attr('transform', '翻译(0, 0) 旋转(' + spinBy + ' 230 150)');