旋转svg对象,而不是其父对象。我需要旋转L3对象而不是其父对象Arm。请帮助我...
<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)');
});
答案 0 :(得分:1)
有效
$('#L3').on('change input', function() {
var rotateBy = $(this).val();
$('#Arm-L3').attr('transform', 'translate(0, 0) rotate(' + rotateBy + ' 230 150)');