【发布时间】：2019-07-25 08:16:08
【问题描述】：
我正在使用 GSAP 尝试以顺时针方向旋转圆形旋钮来制作 SVG 动画，它在圆圈内旋转。尝试了 codelink provided 也尝试了 CSS link provided 但卡在动画中并取自 inspiration lilnk 和 tried code 但无法正常工作请帮助我获取动画任何人指出我正确的方向。提前谢谢`
$(document).ready(function(){
function buildTween(){
var mytween = TweenMax.to('#knob', 80, {
ease:Linear.easeNone,
rotation: 360, repeat:-1
});
}
buildTween();
});<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="wrapper">
<div class="ekin-img">
<svg xmlns="http://www.w3.org/2000/svg" width="661" height="699" viewBox="0 0 661 699"><g>
<g><path fill="#fff6ec" d="M95 45h520v654H95z"/></g>
<g><path fill="#fff6ec" d="M100 271h520v428H100z"/></g>
<g><path fill="#eb8773" d="M294.924 500.229c-.902-1.218-2.67-3.228-3.573-4.446-.171-.23-.557-.198-.747-.022-6.94 6.4-12.663 13.964-18.831 21.114-6.075 7.04-11.187 14.992-17.574 21.736a.519.519 0 0 0-.147.33c-.135.224-.141.549.117.76a90.378 90.378 0 0 1 9.723 9.212c.231.255.65.2.83-.08a897.318 897.318 0 0 1 19.29-28.684c3.21-4.58 12.409-16.282 12.289-17.721-.064-.756-.989-1.677-1.377-2.2"/></g>
<g><path fill="#fff" d="M285.17 530.09c-2.202-1.382-11.502-7.098-15.826-9.609-2.075-1.204-3.22-2.262-3.52-1.558-.85 1.993-5.835 9.853-6.112 10.006-1.36.755-27.188-8.614-36.921-10.307-11.022-1.918-22.183-3.255-33.385-3.134-4.393.046-9.825-.314-13.753 1.99-3.158 1.856-4.914 5.223-6.534 8.372-.31.604.686.96.992.363.14-.273.28-.542.423-.81a230.04 230.04 0 0 0 1.092 6.239c.4 2.092 1.939 5.977-.048 7.693a.54.54 0 0 0-.06.745c2.344 2.909 5.675 4.41 9.11 5.666 4.52 1.656 9.208 2.79 13.904 3.821 9.108 2.003 18.273 3.824 27.52 5.066 9.187 1.231 18.478 1.876 27.745 1.417 8.212-.406 18.082-.962 25.317-5.31 3.29-1.977 9.301-17.323 10.395-18.823 1.094-1.5.311-1.418-.34-1.827"/></g>
<g><path fill="#eb8773" d="M313.586 508.047c-5.231-3.686-10.389-8.05-16.018-11.102-1.485-.807-3.578-1.87-5.32-1.757-1.44.095-2.528 1.514-3.424 2.766a.421.421 0 0 0-.464.236c-.761 1.398-3.22 4.005-1.708 5.459 1.045 1.004 3.08 1.624 4.408 2.185 1.93.815 3.915 1.504 5.887 2.208 3.874 1.383 7.8 3.069 11.782 4.103 3.015.781 3.56-.919 5.002-3.366.147-.25.099-.56-.145-.732"/></g>
<g><path fill="#eb8773" d="M300.35 554.28c4.347 0 8.504.71 12.44 2a877.578 877.578 0 0 1 4.81-13.988c1.866-5.272 7.592-19.013 7.09-20.367-.263-.71-1.4-1.35-1.915-1.75-1.196-.93-3.439-2.392-4.634-3.324-.227-.177-.589-.041-.725.179-4.972 8.026-8.458 16.847-12.485 25.389-1.827 3.873-3.405 7.878-5.001 11.874.14-.002.28-.012.42-.012"/></g>
<g><path fill="#eb8773" d="M247.803 452.772c-2.525-.837-5.134-.475-7.631.257a.466.466 0 0 0-.317-.008c-9.1 2.924-18.54 7.24-22.35 16.665-1.672 4.133-2.873 8.85-2.995 13.318-.139 5.111.481 9.727-.755 14.637a.554.554 0 0 0-.479.349l-11.848 29.153c-.767 1.889-2.212 4.703.733 5.153 4.976.76 10.02.836 15 1.772 2.189.413 4.353.91 6.518 1.43 1.118.269 1.825.596 2.771-.133 1.21-.934 2.017-3.188 2.707-4.508 1-1.913 1.887-3.881 2.757-5.855 2.042-4.623 4.01-9.279 5.934-13.952l.01-.025 6.94-1.166c3.152-.531 6.415-.997 9.317-2.417 5.97-2.921 6.362-8.876 5.823-14.806-.757-8.336-1.25-16.785-2.453-25.069-.865-5.961-3.418-12.72-9.682-14.795"/></g
<g><path fill="#fff" d="M318.095 561.097c-4.557-5.672-9.736-10.393-14.592-15.81-.244-.272-.653-.144-.828.118-3.756 5.591-7.341 9.45-11.098 15.04-49.823-22.659-50.526-24.066-77.114-37.162-.148-.469-.312-.934-.475-1.397a273.696 273.696 0 0 1-18.966-4.733c-3.877-1.121-7.304-3.21-11.061-4.643h-.007c-2.2.85-4.268 2.185-6.083 3.594-.335.26-.667.525-.996.796-7.406 6.065-12.528 14.466-14.904 23.74-3.291 12.85-6.17 25.816-9.159 38.74a1606.006 1606.006 0 0 0-9.686 44.794c-.577 2.865-2.48 7.292.474 9.405 1.782 1.276 4.176 1.97 6.171 2.859 2.384 1.06 4.767 2.122 7.152 3.182l14.304 6.368 14.78 6.579c2.225.992 4.45 1.981 6.675 2.972 1.419.631 3.378 1.98 5.05 1.806 1.273-.132 2.189-1.262 3.007-2.114 1.738-1.81 3.368-3.735 4.93-5.697 2.774-3.48 5.318-7.137 7.751-10.861 4.721-7.227 21.497-38.603 30.664-52.787.51-.007 1.019.004 1.529.045 2.73.217 5.152 1.242 7.717 2.1 4.741 1.586 9.51.847 14.359.274 2.398-.284 4.832-.504 7.242-.24 2.384.262 4.76 1.614 7.178 1.28 2.338-.324 4.28-1.94 6.588-2.432a11.617 11.617 0 0 1 4.294-.105c1.17.192 2.305.564 3.49.675 1.928.182 3.656-.489 4.463-2.32.06-.137.116-.276.174-.414 1.752-1.73 4.113-5.491 5.347-7.143 3.75-5.017 7.972-10.855 11.722-15.87.15-.202.043-.471-.092-.64"/></g>
<g clip-path="url(#clip-29520728-D451-46A3-B7F8-D1ABC6E7DC98)"><path fill="#1f2144" d="M204.833 649.781c-19.924-7.4-42.041-15.585-60.693-25.912-.14-.078-1.25-.75-1.427-.157-6.856 22.912-38.437 56.133-47.71 77.83-.3.702 24.137 24.7 32.271 42.605-2.278.968-4.556 1.933-6.84 2.885-.618.26-.344 1.28.283 1.018 2.333-.975 4.664-1.956 6.991-2.947a402.802 402.802 0 0 0 4.391 9.295c.274.561 1.078.14.962-.413l-.645-3.07c-.101-.482-.658-.462-.907-.164a391.626 391.626 0 0 1-2.834-6.062 1100.348 1100.348 0 0 0 46.488-21.098c4.38-2.113 9.088-4.001 13.239-6.536 3.097-1.891 11.591 6.126 11.288 2.86-1.775-19.233-4.473-40.373-3.139-44.88 2.828-9.55 5.145-14.602 8.607-24.483.12-.344.006-.648-.325-.77"/></g>
<g><path fill="#eb8773" d="M342.262 523.271c-5.955-2.341-12-5.359-18.191-6.99-1.635-.43-3.919-.969-5.584-.445-1.379.433-2.1 2.07-2.672 3.5-.175.012-2.574 4.992-.761 6.046 1.252.728 3.377.848 4.8 1.078 2.069.335 4.16.533 6.243.75 4.091.426 8.305 1.134 12.419 1.194 3.113.044 3.24-1.737 4.061-4.456a.541.541 0 0 0-.315-.677"/></g>
<g><path fill="#fff" d="M195.45 639.31a6.394 6.394 0 0 1-.897.733c-1.904-5.545-4.2-10.896-6.511-16.302-1.447-3.386-2.527-6.812-3.11-10.453-.55-3.435-.868-6.9-1.508-10.32-1.299-6.951-3.357-13.74-5.312-20.526-1.953-6.786-3.974-13.557-6.397-20.192-2.726-7.468-6.536-14.5-9.153-21.998a67.968 67.968 0 0 1 1.953-5.268c.131-.312-.38-.449-.51-.14a68.348 68.348 0 0 0-1.864 5.014c-.126.034-.227.15-.171.311l.039.105c-3.411 10.524-4.583 21.671-7.839 32.259-1.967 6.398-5.115 12.059-8.237 17.936-1.44 2.713-2.788 5.496-3.72 8.432-.942 2.97-1.24 6.082-2.06 9.081-.92 3.37-2.87 5.72-5.044 8.35-1.648 1.992-3.147 4.16-3.01 6.856.01.189.16.28.334.255 4.812-.685 9.778.223 14.007 2.632 3.89 2.216 6.677 5.765 11.036 7.201 4.532 1.492 9.432 1.832 14.057 3.02 4.629 1.189 8.989 3.027 13.53 4.456 2.968.935 6.453 1.575 9.214.078.28.848.553 1.697.816 2.55.1.323.61.185.51-.141-.278-.898-.57-1.789-.869-2.676.38-.247.745-.536 1.09-.88.24-.24-.132-.614-.373-.373"/></g>
<g><path fill="#5c3232" d="M238.526 448.47c-3.732-.54-7.916-.28-11.93.623a37.565 37.565 0 0 0-15.793 6.556 36.685 36.685 0 0 0-7.067 6.646c-2.268 2.798-4.051 5.936-6.094 8.895-7.401 10.714-19.593 16.931-26.855 27.743-3.838 5.71-5.25 12.465-8.119 18.633-1.481 3.185-3.447 5.95-5.94 8.426-2.225 2.207-4.651 4.231-6.588 6.71-1.966 2.517-2.888 5.306-3.683 8.361-.389 1.49-.775 3-1.424 4.403-.733 1.585-1.927 2.637-2.96 3.993-1.439 1.886-.558 4.047 1.91 4.16 1.567.072 3.029-.733 4.608-.658 1.617.076 3.08.835 4.38 1.747 2.616 1.835 4.755 4.376 7.686 5.749 2.9 1.36 6.114 1.266 9.262 1.248 4.136-.281 6.886 3.023 7.5 3.723 1.359 1.554 2.829 3.304 4.979 3.686 1.244.221 2.504-.111 3.75.054 1.507.2 2.721 1.1 3.89 2.011 1.775 1.384 3.516 2.598 5.793 2.976.723.12 1.721.315 2.345-.197.574-.47.525-1.321.58-1.989.235-2.807.944-5.585 2.207-8.111 1.07-2.14 2.612-4.045 4.043-6.002 2.976-3.237 6.923-5.83 8.729-9.943 1.662-3.783 1.446-8.031 1.75-12.062.18-2.418.555-4.837 1.583-7.053 1.047-2.26 2.63-4.21 4.259-6.075 3.122-3.572 6.086-7.056 8.082-11.412 1.961-4.278 2.609-8.787 3.696-13.318.546-2.275 1.269-4.55 2.56-6.522 1.3-1.984 3.235-3.346 4.764-5.127 3.198-3.722 1.348-8.335 2.27-12.718a16.514 16.514 0 0 1 3.442-7.11c1.655-1.994 3.763-3.125 5.807-4.63 1.372-1.009 2.939-1.965 3.12-2.255.67-1.068-3.34-9.247-16.542-11.16"/></g>
<g><path fill="#1f2144" d="M296.897 569.58c-.118-.317-.628-.18-.51.139a25.272 25.272 0 0 1 1.616 8.897c0 .34.528.34.528 0a25.686 25.686 0 0 0-1.634-9.037"/></g>
<g><path fill="#545b94" fill-opacity=".25" d="M195.127 655.966c-.048-.1-.149-.17-.287-.118-4.054 1.495-5.586 6.489-7.142 10.091-2.139 4.956-4.065 10-5.834 15.098-3.583 10.333-6.515 20.876-9.317 31.442-.402 1.522-.804 3.045-1.203 4.568-.321 1.222-.886 2.577-.95 3.843-.035.693.174 1.252.86 1.501 1.09.397 2.516.353 3.677.484-.052.063-.103.123-.153.2-.185.286.272.552.457.267.847-1.312 1.95.578 2.223 1.265.084.21.463.288.509 0 1.44-9.124 2.608-18.348 4.514-27.39 1.878-8.911 4.638-17.629 7.533-26.256a442.335 442.335 0 0 1 5.231-14.707c.053-.14-.016-.24-.118-.288"/></g>
<g><path fill="#545b94" fill-opacity=".25" d="M166.732 644.791c-.035-.106-.127-.187-.27-.153-4.206.993-6.334 5.763-8.315 9.15-2.724 4.659-5.25 9.431-7.624 14.278-4.811 9.82-9.002 19.93-13.066 30.078-.585 1.461-1.168 2.923-1.75 4.387-.466 1.174-1.191 2.45-1.409 3.7-.118.684.021 1.264.67 1.594 1.035.527 2.456.656 3.592.927-.058.057-.116.11-.175.18-.218.261.203.58.42.32 1.002-1.2 1.866.811 2.054 1.526.057.219.425.343.505.062 2.538-8.882 4.817-17.894 7.806-26.638 2.946-8.618 6.745-16.937 10.667-25.15a441.94 441.94 0 0 1 6.978-13.962c.069-.13.012-.239-.083-.299"/></g>
<g><path fill="#545b94" fill-opacity=".25" d="M151.892 639.244c-.03-.109-.116-.194-.26-.17-4.257.75-6.655 5.39-8.828 8.657-2.989 4.494-5.784 9.114-8.433 13.815-5.37 9.528-10.135 19.379-14.777 29.276-.668 1.426-1.334 2.852-1.999 4.28-.533 1.145-1.33 2.378-1.62 3.613-.158.674-.052 1.261.578 1.63 1.003.584 2.414.795 3.532 1.13-.062.054-.123.105-.186.17-.232.25.17.592.402.344 1.068-1.14 1.817.918 1.962 1.643.044.22.404.365.5.09 3.045-8.721 5.84-17.587 9.327-26.143 3.438-8.436 7.71-16.522 12.097-24.494a440.63 440.63 0 0 1 7.771-13.539c.075-.126.026-.237-.066-.302"/></g>
<g><path fill="#545b94" fill-opacity=".25" d="M180.25 659.03c-.041-.104-.137-.18-.278-.139-4.153 1.196-6.046 6.064-7.86 9.544-2.495 4.785-4.785 9.676-6.92 14.631-4.33 10.043-8.024 20.344-11.59 30.678-.513 1.488-1.023 2.978-1.533 4.467-.41 1.195-1.072 2.506-1.228 3.765-.086.687.082 1.26.746 1.559 1.06.476 2.485.536 3.633.751-.056.059-.11.116-.166.188-.206.273.23.57.435.3.941-1.248 1.903.72 2.125 1.424.068.216.441.321.508.037 2.102-8.995 3.941-18.107 6.501-26.986 2.524-8.752 5.914-17.245 9.431-25.638a447.51 447.51 0 0 1 6.292-14.286c.062-.133.002-.24-.097-.295"/></g>
<g><path fill="#1f2144" fill-opacity=".25" d="M218.616 511.342c.002-.161-.123-.324-.32-.256-4.539 1.553-8.564 4.376-11.522 8.162-3.515 4.5-4.728 10.24-8.04 14.88-1.672 2.342-3.688 4.378-5.921 6.186-1.928 1.56-3.975 3.012-5.643 4.863-1.658 1.84-2.475 3.856-3.112 6.217-.68 2.522-1.896 4.563-3.656 6.48-1.688 1.838-3.668 3.505-5.372 5.364 1.266.874 2.097 1.863 2.402 2.21 1.36 1.554 2.83 3.304 4.98 3.686 1.243.221 2.503-.112 3.749.054 1.304.173 2.388.87 3.413 1.643.686-.717 1.185-1.65 1.474-2.629.862-2.907.775-6.019 1.656-8.942.949-3.156 2.73-5.447 5.096-7.675 1.992-1.877 3.723-3.808 4.98-6.26 2.622-5.104 3.237-10.887 4.57-16.392.804-3.317 1.893-6.61 3.81-9.465 2.017-3.001 4.794-5.384 7.51-7.727.154-.133.083-.316-.054-.399"/>
</g>
<g><path fill="#1f2144" fill-opacity=".25" d="M192.548 490.22c-6.014 4.428-12.304 9.174-15.806 15.958-.863 1.67-1.456 3.467-2.35 5.12-1.101 2.037-2.695 3.015-4.516 4.31-3 2.135-4.707 5.22-5.56 8.74-.577 2.377-1.399 4.446-2.661 6.543-1.1 1.825-2.224 3.616-2.836 5.673-.062.21.215.427.398.286 1.49-1.153 2.97-2.359 4.06-3.857.148.075 5.264-8.549 8.089-10.644 3.197-2.372 6.512-4.674 8.455-8.257.99-1.823 1.647-3.797 2.382-5.73a58.667 58.667 0 0 1 2.864-6.373 58.55 58.55 0 0 1 7.815-11.365c.188-.215-.082-.589-.334-.404"/></g>
<g><path id="pie" fill="#1f2144" d="M490.364 414.282c0 63.159-51.197 114.36-114.352 114.36S261.66 477.442 261.66 414.283c0-63.16 51.197-114.362 114.352-114.362s114.352 51.201 114.352 114.362"/></g>
<g><path fill="#eb8773" d="M490.333 502.767c.08-.079.157-.16.238-.239l8.536-6.34a43.328 43.328 0 0 1 4.086-2 882.411 882.411 0 0 1-1.815-7.76c-1.445-6.327-4.628-23.999-5.962-25.016-.698-.532-1.95.19-2.702.116-1.75-.169-4.858-.21-6.609-.38-.331-.032 1.787-.167 1.79.132.111 10.96-.216 22.268 1.14 33.144.35 2.787.806 5.567 1.298 8.343"/></g>
<g><path fill="#1f2144" d="M561.275 573.494c-8.83-7.835-31.693-14.261-35.865-26.198-2.082-5.956-2-12.359-2.85-18.545-.779-5.683-.947-6.934-4.52-11.445-2.251-2.84-3.757-5.498-4.018-9.223-.221-3.15.11-6.412-.828-9.476-1.51-4.938-6.332-7.936-8.24-12.561.089-1.101.057-2.21-.403-3.238-.503-1.124-1.406-1.65-2.403-2.285-1.616-1.027-2.138-2.508-2.489-4.309-.35-1.797-.652-3.603-.977-5.404-.027-.149-.196-.209-.325-.185a31.113 31.113 0 0 0-6.897 2.092c-1.88.824-3.527 1.434-3.938 3.595-.444 2.33-.251 4.76-.933 7.048-.35 1.174-1.101 2.19-1.399 3.38-.233.931-.173 1.888-.064 2.833-.285 4.402.61 7.983 2.595 11.992 1.305 2.633 2.464 5.163 2.774 8.125.29 2.788.014 5.6.057 8.397.072 4.68 1.55 8.817 3.546 12.999 2.399 5.022 2.911 6.324 4.016 11.81 1.09 5.422 1.822 10.906 2.951 16.323a214.394 214.394 0 0 0 3.956 15.915c1.117 3.857 12.297 9.324 15.996 11.492 1.988 1.166 4.283 1.718 6.481 2.33l9.1 2.526 5.667 1.574c-1.092 3.99 2.928 7.783 6.69 9.208 7.532 2.854 16.062 3.037 23.883 1.449.173-.036.32-.216.356-.382 2.533-11.345-3.606-22.459-11.919-29.837"/></g><g><path fill="#eb8773" d="M392.671 516.432a566.72 566.72 0 0 0 2.017 5.077c.628 1.557 4.36 5.573 7.189 7.462.811.542 5.193-2.907 10.101-3.971.171-.037.303-.218.26-.394-1.466-5.882-2.905-11.953-5.076-17.614-.028-.07-.454.181-.502.152a.294.294 0 0 0-.27-.065c-3.618.795-5.782 1.568-9.347 2.577-1.657.468-3.471.826-5.053 1.509-.557.24-.876.444-.87 1.102.01 1.282 1.089 2.982 1.551 4.165"/></g>
<g><path fill="#eb8773" d="M410.502 508.256c-.271 2.256-.696 4.49-1.107 6.724-.337 1.832-.788 3.633-.388 5.485.4 1.853 1.25 3.57 2.334 5.112a.289.289 0 0 0 .288.124c.124.199.5.208.565-.093.79-3.658 1.692-7.256 1.669-11.022-.013-1.997-.082-4.575-.363-6.551-.2-1.396-.326-2.778-1.235-3.92-.11-.138-.268-.174-.424-.09-1.455.794-1.168 2.818-1.339 4.23"/></g>
<g><path fill="#eb8773" d="M400.55 494.001c.68 2.478 1.44 4.927 2.051 7.426.647 2.636 1.08 5.31 1.683 7.952.493 2.154 1.608 2.396 3.39 3.181l.057.287c.076.388.657.19.582-.19a5.171 5.171 0 0 1-.025-.13c.073-.126.064-.29-.078-.387-.768-3.898-1.55-7.8-2.634-11.626-1.014-3.578-2.145-7.59-4.385-10.618-.101-.135-.277-.18-.424-.089-1.269.79-.531 3.053-.218 4.194"/></g>
<g><path fill="#eb8773" d="M394.914 493.69c.893 2.41 1.863 4.783 2.69 7.22.872 2.57 1.535 5.195 2.365 7.775.677 2.104 1.808 2.248 3.653 2.877l.08.28c.11.379.672.132.564-.242l-.037-.124c.063-.133.04-.297-.11-.38-1.103-3.817-2.22-7.636-3.632-11.354-1.32-3.476-2.795-7.374-5.29-10.197-.111-.126-.29-.156-.43-.052-1.195.896-.263 3.087.147 4.196"/></g>
<g><path fill="#eb8773" d="M390.773 497.018c.977 2.378 2.028 4.716 2.938 7.122.962 2.538 1.715 5.14 2.635 7.69.75 2.08 1.885 2.183 3.75 2.747l.09.277c.123.376.676.11.555-.26a4.896 4.896 0 0 0-.04-.124c.056-.135.028-.297-.123-.375-1.236-3.777-2.486-7.555-4.026-11.221-1.439-3.429-3.048-7.273-5.64-10.008a.314.314 0 0 0-.431-.037c-1.163.939-.156 3.095.292 4.19"/></g>
<g><path fill="#eb8773" d="M499.412 525.592c-4.648 7.828-8.653 16.116-12.876 24.18-3.005 5.738-5.085 11.885-.295 17.303 2.327 2.63 5.413 4.457 8.36 6.299l6.493 4.055v.028c-.008 5.496.037 10.996.168 16.49.056 2.346.13 4.693.34 7.031.145 1.612.02 4.214.85 5.657.648 1.124 1.494 1.088 2.729 1.283 2.391.378 4.775.776 7.146 1.271 5.395 1.126 10.497 3.146 15.814 4.449 3.146.771 2.864-2.659 2.877-4.875l.198-34.225a.604.604 0 0 0-.336-.551c.796-5.448 3.337-9.831 5.32-15.026 1.732-4.543 2.484-9.782 2.521-14.631.084-11.057-7.612-19.318-15.545-26.036a.5.5 0 0 0-.322-.122c-2.206-1.776-4.678-3.221-7.565-3.43-7.157-.515-12.53 5.217-15.877 10.85"/></g>
<g><path fill="#eb8773" d="M485.033 543.903c-.552.707 3.332 4.012 5.35 5.952.151.145.397.067.484-.103 1.679-3.31 3.325-6.67 4.715-10.114.649-1.605 2.063-5.15-.133-6.157l.227-.223c.286-.28-.189-.682-.472-.404-3.637 3.58-9.199 9.802-10.17 11.05"/></g>
<g clip-path="url(#clip-24E82383-1753-4C60-A0EC-190474C71E50)"><path fill="#1f2144" d="M597.559 715.612c-.477-3.504-1.172-6.99-1.757-10.473-2.306-13.734-10.496-61.007-12.84-74.733-2.134-12.51-3.965-25.941-8.846-37.551-2.086-4.962-5.052-10.304-9.742-12.45-5.202-2.383-11.005-.182-16.085 1.433a327.914 327.914 0 0 0-13.013 4.448l-.354-7.157a.534.534 0 0 0-.685-.487c-9.298 2.692-17.683 7.955-26.12 12.561-4.607 2.514-9.296 4.918-13.834 7.55-1.13.658-2.154 1.287-2.646 2.572-.314.82-.324 1.691-.28 2.575-22.143 8.466-53.15 18.941-53.623 18.183-.693-1.11-.276-12.161-2.074-17.118-.804-2.222-1.931-4.266-2.85-6.426-1.298-3.054-.162-10.355-.448-13.135-.242-2.353-.985-3.148-1.759-5.345-1.855-5.263-4.652-10.175-5.653-15.784-.854-4.788.266-9.609.149-14.386.19-1.657.402-3.76-.255-5.271-.54-1.24-1.812-1.506-3.003-1.814-2.2-.57-3.17-2.03-3.886-4.09-.732-2.107-1.357-4.255-2.031-6.38-.033-.103-.137-.203-.254-.193-3.253.281-6.465.903-9.568 1.923-1.087.356-2.89.687-3.613 1.688-.664.919-.36 2.43-.348 3.472.02 1.675.117 3.37.036 5.044-.096 1.964-.94 3.126-2.391 4.353-.499.423-1.028.967-1.42 1.57-.292.19-.304.42-.294.514-.004.013-.008.026-.01.04a2.85 2.85 0 0 0-.286 1.117c-1.238 5.02-1.647 9.584.075 14.756 1.999 5.995 4.107 11.401 4.222 17.943.101 5.843-2.21 5.58-.326 11.275 1.511 4.572 4.416 8.333 6.313 12.665 3.908 8.924 1.157 22.457 1.993 28.732.383 2.873.835 5.735 1.294 8.593.384 2.386.64 5.085 2.003 7.072 2.485 3.624 7.832 3.273 11.405 3.397 3.322.116 46.51 4.091 49.804 3.796-.751 2.782 2.777 43.69 2.904 46.458.093 2.05 108.36 15.43 110.89 14.932a89.305 89.305 0 0 0 4.369-.97c1.159-.288 2.946-.448 3.95-1.278 1.126-.933 1.083-2.179.887-3.62"/></g>
<g><path fill="#5c3232" d="M551.476 545.5a12.568 12.568 0 0 0-1.663-4.959c-.522-.894-2.874-2.944-2.836-3.719.03-.598.988-1.754 1.2-2.412a9.817 9.817 0 0 0 .441-2.31 11.238 11.238 0 0 0-1.057-5.621c-1.562-3.287-4.62-5.572-7.932-6.9-2.415-.97-5.68-.849-7.27-3.119-1.174-1.678-1.53-3.675-2.903-5.26-2.383-2.753-6.126-3.977-9.667-3.1a9.985 9.985 0 0 0-2.65 1.07c-1.19.702-2.167 2.104-3.711 1.994-.811-.058-1.631-.58-2.498-.64a7.28 7.28 0 0 0-2.803.367c-3.712 1.228-5.353 5.102-4.439 8.71.338 3 2.852 4.087 4.867 6.002 3.429 3.255.215 5.885-.888 9.212-.701 2.11-.046 3.891 1.492 5.42 1.154 1.15 2.573 1.972 3.586 3.265 1.511 1.929 1.776 4.342 1.683 6.715-.121 3.047-.636 4.918 2.167 6.709 3.147 2.012 6.982 4.05 7.543 8.155.426 3.122-.39 5.951 1.804 8.577 1.515 1.814 3.632 2.739 5.966 2.814.409.013.554-.361.462-.669 3.757-1.781 7.868-3.9 9.515-7.978.753-1.87.525-3.71.779-5.661.4-3.088 2.504-4.098 4.618-5.972 2.99-2.65 4.632-6.702 4.194-10.69"/></g>
<g><path fill="#eb8773" d="M387.484 502.588c.968 2.382 2.01 4.723 2.914 7.133.952 2.54 1.696 5.146 2.607 7.697.743 2.082 1.878 2.19 3.74 2.761.031.092.061.185.09.278.122.375.676.11.556-.26l-.04-.124c.058-.134.03-.296-.122-.374-1.223-3.781-2.459-7.563-3.986-11.236-1.428-3.433-3.024-7.283-5.606-10.025a.313.313 0 0 0-.431-.04c-1.167.934-.168 3.094.278 4.19"/></g>
<g><path fill="#eb8773" d="M494.182 445.303c-.109-2.243.038-4.613-.813-6.682-.007-.08-.006-.162-.015-.242-.32-2.928-2.072-5.405-3.75-7.726a.314.314 0 0 0-.317-.127c-.147-.896-.543-4.933-2.302-4.445-.409.114-.535.397-.62.779-.137.618.104 1.458.161 2.082.082.882.169 1.763.245 2.646.293 3.377.468 6.802-.19 10.149-.554 2.823-1.706 5.485-2.794 8.134-.467 1.137-1.053 2.409-1.548 3.721-1.37-4.46-2.729-8.922-4.136-13.37-.046-.148-.217-.276-.38-.216-1.083.404-1.201 1.48-1.168 2.526.079 2.492.255 5.033.57 7.507 1.397 10.977 10.267 15.892 11.163 17.048.06.279 4.003-2.097 6.546-3.683.834-.519 1.507 5.126 1.834 4.145.472-1.414-2.294-18.322-2.486-22.246"/></g>
<g><path fill="#545b94" fill-opacity=".25" d="M429.76 600.006c1.343 2.208 3.454 4.621 6.054 5.337-.036-.112-.072-.224-.11-.33-.806-2.22-1.932-4.265-2.85-6.425-1.299-3.054-.163-10.355-.45-13.135-.24-2.354-.984-3.15-1.758-5.345-1.856-5.263-4.652-10.175-5.653-15.784-.472-2.654-.34-5.316-.148-7.976a52.338 52.338 0 0 0-7.88-.681c-.832-.01-1.97-.206-2.76.122-1.255.52-.697 2.387-.501 3.387.381 1.945 1.097 3.806 1.947 5.59 1.813 3.805 4.271 7.275 5.96 11.141 1.781 4.074 2.712 8.44 3.822 12.725 1.018 3.928 2.205 7.882 4.328 11.374"/></g>
<g><path fill="#545b94" fill-opacity=".25" d="M505.707 691.113c4.05 3.144 8.426 5.162 13.635 5.02 6.648-.181 15.592-2.805 20.748-2.247.247.026.413-.2.299-.388-3.344-5.494-9.891-16.457-17.949-21.773-4.372-2.884-8.96-4.212-14.026-5.346-5.576-1.25-11.104-2.443-16.791-2.992-6.03-.583-9.478-1.033-16.737-2.88-.005-.072-.184-.054-.432.006-.175 1.925.195 8.678.727 16.45 5.69.71 11.739 1.57 16.875 4.052 5.2 2.515 9.148 6.6 13.651 10.098"/></g>
<g transform="rotate(50 502 537.5)"><path fill="#5c3232" d="M508.544 536.39c.026-.15-.038-.301-.248-.352-2.8-.684-5.73-1.11-8.634-1.028-1.586.044-4.563.58-4.662 2.5-.008.153.08.34.255.386.517.137 4.266.045 5.61.182 2.27.233 4.436.652 6.705.877.862.086 2.233.162 2.417-.919.128-.755-.689-1.269-1.443-1.647"/></g>
<g class="drag" clip-path="url(#clip-1C8A8979-F7C1-4BB0-843D-F01023B043EE)">
<path id="knob" fill="#f66" d="M375.74 287.09v129.12l62.184-113.781s-21.75-18.964-62.184-15.338"/></g>
<g class="spin-block"><path id="spin" fill="#8073eb" d="M169.5 91c25.129 0 45.5-20.371 45.5-45.5S194.629 0 169.5 0 124 20.371 124 45.5 144.371 91 169.5 91z"/></g>
<g><path id="rect" fill="#f66" d="M17 173h151v37H17z"/></g>
<g transform="rotate(58 1501 2433.5)"><path fill="#f66" d="M455 241h57v10h-57z"/></g>
<g transform="rotate(58 1501 2433.5)"><path fill="#ffbf66" d="M521.5 274c15.74 0 28.5-12.76 28.5-28.5S537.24 217 521.5 217 493 229.76 493 245.5s12.76 28.5 28.5 28.5z"/></g>
<g><path id="square" fill="#1f2144" d="M570 98h91v91h-91z"/></g>
<g><path fill="#ffbf66" d="M300.876 166v45.026h-48.138v45.087h-51.24v45.252H152.31v45.089h-51.242v45.205H51.241v45.088H0V496h14.124v-45.102H51.24v.014h14.124v-45.101h45v-.104h4.827v-45.102h37.118v.014h14.124v-45.102h45v-.151h4.187v-45.101h37.117v.013h14.124v-45.1h34.014v.075H315V166z"/></g>
<g transform="rotate(8 254 480)"><path fill="#162040" d="M255.947 480c.2 1.377-.52 2.57-1.606 2.664-1.086.094-2.128-.946-2.328-2.322-.2-1.378.52-2.571 1.605-2.666 1.086-.094 2.13.946 2.329 2.323"/></g>
<g transform="rotate(-30 250.5 475.5)"><path fill="#803c3a" d="M245.615 477.877c.924.588 6.063-1.099 7.901-1.613.9-.252 2.615-.656 2.476-1.797-.096-.792-.432-.94-.538-1.002-1.505-.862-5.442-.518-7.74.967-.755.488-4.065 2.194-2.099 3.445"/></g>
<g transform="rotate(10 253.5 496.5)"><path fill="#cc3f2f" d="M254.943 493.536c-1.789 1.048-3.628 2.186-5.514 3.306-.254 0-.562.933-.179 1.507 1.633 2.445 5.988 2.25 7.857.866 1.424-1.057.219-2.567.942-6.166.104-.515-.2-1.146-.429-1.024-.879.472-1.772.98-2.677 1.51z"/></g>
<g transform="rotate(10 254 495)"><path fill="#fff" d="M257.936 492.009c-1.736.484-2.663 1.371-3.698 1.983-1.195.705-2.468 1.185-4.238 2.58 1.539 2.706 3.585.921 5.26-.108 1.247-.767 2.286-1.815 2.74-4.464a.224.224 0 0 0-.064.009z"/></g>
<g transform="rotate(20 492.5 555)"><path fill="#fff" d="M487.023 551.853c-.756-.265-.564 2.465-.564 2.465s-.023 6.003 2.651 6.045c2.411.038 7.969-.654 9.069-5.093.224-.904-.079-2.071-.606-2.027-3.548.296-7.05-.154-10.55-1.39z"/></g>
</g></svg>
</div>
</div>【问题讨论】：
-
这是一个变换原点的问题，你需要设置它来获得正确的旋转。顺便说一下svg无效，
元素第11行没有关闭。 -
@remib: 哦，是的，现在我已经关闭了
标记并尝试转换我试图正确设置但无法正常工作的属性。知道如何正确设置。跨度>
标签： javascript html css animation gsap