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

Question

旋转svg对象w.r.t它的父对象。我需要旋转L3对象w.r.t --它是父对象臂。请帮帮我..。

演示

<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('change input', function() { var rotateBy = $(this).val(); $('#Arm-L3').attr('transform', 'translate(0, 0) rotate(' + rotateBy + ' 230 150)');