I have some shapes that I rotate using two buttons — one to rotate clockwise and the other counterclockwise:

var svgNS = "http://www.w3.org/2000/svg"; function cwAnim(evt) { if (window.svgDocument == null) svgDoc = evt.target.ownerDocument; addRotateTransform('someShape', 1, -1, 180); addRotateTransform('shape1', 1, 1, 360); addRotateTransform('shape2', 1, 1, 360); } function acwAnim(evt) { if (window.svgDocument == null) svgDoc = evt.target.ownerDocument; addRotateTransform('someShape', 1, 1, 180); addRotateTransform('shape1', 1, -1, 360); addRotateTransform('shape2', 1, -1, 360); } function addRotateTransform(target_id, dur, dir, angle) { var my_element = svgDoc.getElementById(target_id); var a = svgDoc.createElementNS(svgNS, "animateTransform"); var bb = my_element.getBBox(); var cx = bb.x + bb.width / 2; var cy = bb.y + bb.height / 2; a.setAttributeNS(null, "attributeName", "transform"); a.setAttributeNS(null, "attributeType", "XML"); a.setAttributeNS(null, "type", "rotate"); a.setAttributeNS(null, "dur", dur + "s"); a.setAttributeNS(null, "repeatCount", "1"); a.setAttributeNS(null, "fill", "freeze"); a.setAttributeNS(null, "additive", "sum"); a.setAttributeNS(null, "accumulate", "sum"); a.setAttributeNS(null, "from", "0 " + cx + " " + cy); a.setAttributeNS(null, "to", angle * dir + " " + cx + " " + cy); my_element.appendChild(a); a.beginElement(); } 
 <svg width="600px" height="600px" viewBox="0 0 1000 1000"> <circle stroke="#000000" stroke-miterlimit="10" cx="468.451" cy="474.385" r="350" /> <g id="someShape"> <circle fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" cx="468.451" cy="474.385" r="350" /> <path id="shape1" fill="#DC5A00" stroke="#000000" stroke-miterlimit="10" d="M692.373,317.798C692.373,418.425,606.244,500,500,500 c-106.245,0-192.374-81.575-192.374-182.202c0-100.629,86.128-182.204,192.374-182.204 C606.244,135.595,692.373,217.169,692.373,317.798z M553.391,220.34c-39.316,0-71.188,31.87-71.188,71.187 s31.871,71.187,71.188,71.187c39.314,0,71.186-31.87,71.186-71.187S592.705,220.34,553.391,220.34z" /> <path id="shape2" fill="#3DFF63" stroke="#000000" stroke-miterlimit="10" d="M577.368,647.034c0,69.738-56.913,126.271-127.119,126.271 c-70.206,0-127.119-56.533-127.119-126.271c0-69.737,56.913-126.271,127.119-126.271 C520.455,520.764,577.368,577.297,577.368,647.034z M466.352,617.373c-21.998,0-39.831,17.453-39.831,38.983 c0,21.529,17.833,38.982,39.831,38.982s39.831-17.453,39.831-38.982C506.182,634.826,488.349,617.373,466.352,617.373z" /> </g> <g onclick="cwAnim(evt)"> <rect x="89.762" y="815.369" stroke="#000000" stroke-miterlimit="10" width="217.865" height="134.426" /> <text transform="matrix(1 0 0 1 127.4673 864.5491)" fill="#FFFFFF" font-family="'MyriadPro-Regular'" font-size="21">AntiClockwise</text> </g> <g onclick="acwAnim(evt)"> <rect x="692.373" y="815.369" stroke="#000000" stroke-miterlimit="10" width="194.11" height="134.426" /> <text transform="matrix(1 0 0 1 752.0576 869.467)" fill="#FFFFFF" font-family="'MyriadPro-Regular'" font-size="21">Clockwise</text> </g> </svg>

When I click a button once, the animation works well.
The problem occurs when I quickly press the buttons several times (double click, triple click, etc.).
The axis of rotation is shifted, and this, of course, is undesirable.

Is there a way to solve this problem?
Something like, when I click on another button, the previous animation stops from saving the position, and a new animation happens.

Source: SVG - Animation Problems

1 answer 1

By adding the busy variable, you can indicate that the current animation is currently busy and you do not need to start a new animation. You can do more with it, but it fixes the main problem.

 var svgNS = "http://www.w3.org/2000/svg"; var busy = false; function animationDelegate(evt, direction){ /* Проверка состояния переменной, прежде чем делать, что-либо */ /* Если анимация активна, то прекратить выполнение запроса на выполнение новой анимации */ if(busy) return; else busy = true; if(direction === 'cw') cwAnim(evt); else if(direction === 'ccw') acwAnim(evt); /* Продолжительность анимации 1s. или по другому 1000ms.*/ /* Set a timeout that resets busy.*/ setTimeout(function(){ busy = false}, 1000); } function cwAnim(evt){ if ( window.svgDocument == null) svgDoc = evt.target.ownerDocument; addRotateTransform('someShape', 1, -1, 180); addRotateTransform('shape1', 1, 1, 360); addRotateTransform('shape2', 1, 1, 360); } function acwAnim(evt){ if ( window.svgDocument == null) svgDoc = evt.target.ownerDocument; addRotateTransform('someShape', 1, 1, 180); addRotateTransform('shape1', 1, -1, 360); addRotateTransform('shape2', 1, -1, 360); } function addRotateTransform(target_id, dur, dir, angle){ var my_element = svgDoc.getElementById(target_id); var a = svgDoc.createElementNS(svgNS, "animateTransform"); var bb = my_element.getBBox(); var cx = bb.x + bb.width/2; var cy = bb.y + bb.height/2; a.setAttributeNS(null, "attributeName", "transform"); a.setAttributeNS(null, "attributeType", "XML"); a.setAttributeNS(null, "type", "rotate"); a.setAttributeNS(null, "dur", dur + "s"); a.setAttributeNS(null, "repeatCount", "1"); a.setAttributeNS(null, "fill", "freeze"); a.setAttributeNS(null, "additive", "sum"); a.setAttributeNS(null, "accumulate", "sum"); a.setAttributeNS(null, "from", "0 "+cx+" "+cy); a.setAttributeNS(null, "to", angle*dir+" "+cx+" "+cy); my_element.appendChild(a); a.beginElement(); } 
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="600px" height="600px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve"> <circle stroke="#000000" stroke-miterlimit="10" cx="468.451" cy="474.385" r="350" /> <g id="someShape"> <circle fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" cx="468.451" cy="474.385" r="350" /> <path id="shape1" fill="#DC5A00" stroke="#000000" stroke-miterlimit="10" d="M692.373,317.798C692.373,418.425,606.244,500,500,500 c-106.245,0-192.374-81.575-192.374-182.202c0-100.629,86.128-182.204,192.374-182.204 C606.244,135.595,692.373,217.169,692.373,317.798z M553.391,220.34c-39.316,0-71.188,31.87-71.188,71.187 s31.871,71.187,71.188,71.187c39.314,0,71.186-31.87,71.186-71.187S592.705,220.34,553.391,220.34z" /> <path id="shape2" fill="#3DFF63" stroke="#000000" stroke-miterlimit="10" d="M577.368,647.034c0,69.738-56.913,126.271-127.119,126.271 c-70.206,0-127.119-56.533-127.119-126.271c0-69.737,56.913-126.271,127.119-126.271 C520.455,520.764,577.368,577.297,577.368,647.034z M466.352,617.373c-21.998,0-39.831,17.453-39.831,38.983 c0,21.529,17.833,38.982,39.831,38.982s39.831-17.453,39.831-38.982C506.182,634.826,488.349,617.373,466.352,617.373z" /> </g> <g onclick="animationDelegate(evt, 'ccw')"> <rect x="89.762" y="815.369" stroke="#000000" stroke-miterlimit="10" width="217.865" height="134.426" /> <text transform="matrix(1 0 0 1 127.4673 864.5491)" fill="#FFFFFF" font-family="'MyriadPro-Regular'" font-size="21">AntiClockwise</text> </g> <g onclick="animationDelegate(evt, 'cw')"> <rect x="692.373" y="815.369" stroke="#000000" stroke-miterlimit="10" width="194.11" height="134.426" /> <text transform="matrix(1 0 0 1 752.0576 869.467)" fill="#FFFFFF" font-family="'MyriadPro-Regular'" font-size="21">Clockwise</text> </g> </svg>

Source: SVG - Animation Problems @something