我有以下SVG，它产生一个里面有2个齿轮的多边形，一个大而一个小：
<a href="#nogo" class="services__support">
<svg viewBox="0 0 124 111" preserveAspectRatio="xMinYMin meet">
<polygon fill="#FBB040" points="32.373,107.329 2.519,55.622 32.373,3.916 92.082,3.916 121.93,55.622 92.082,107.329 "></polygon>
<g class="correct">
<g class="large-cog">
<path fill="#FFFFFF" d="M27.964 34.342c0.365-0.637 0.239-1.393-0.276-1.695l-1.265-0.909 -1.259-0.909c-0.518-0.297-0.76-0.853-0.395-1.483 0.37-0.638 0.973-0.707 1.49-0.407l1.414 0.639 1.417 0.638c0.521 0.3 1.338-0.076 1.706-0.706 0.517-0.521 0.69-1.387 0.271-1.813l-0.982-1.2 -0.986-1.2c-0.423-0.426-0.514-1.025 0.006-1.541 0.52-0.521 1.116-0.43 1.541-0.005l1.206 0.978 1.2 0.985c0.423 0.426 1.187 0.347 1.708-0.173l0.244-0.138c0.633-0.37 0.904-1.087 0.607-1.609l-0.638-1.414 -0.635-1.419c-0.304-0.518-0.234-1.121 0.401-1.484 0.633-0.37 1.19-0.125 1.489 0.392l0.907 1.261 0.909 1.262c0.299 0.522 1.19 0.604 1.827 0.24 0.709-0.19 1.295-0.85 1.14-1.432l-0.25-1.533 -0.248-1.533c-0.157-0.577 0.065-1.142 0.775-1.333 0.706-0.188 1.183 0.191 1.334 0.772l0.553 1.446 0.553 1.453c0.155 0.582 0.994 0.896 1.704 0.707 0.732 0 1.466-0.489 1.466-1.088l0.157-1.546 0.158-1.542c0-0.6 0.361-1.089 1.092-1.089 0.733 0 1.094 0.489 1.094 1.089l0.157 1.542 0.155 1.546c0 0.599 0.597 0.815 1.33 0.815l0.272 0.076c0.707 0.189 1.409 0.142 1.56-0.436l0.555-1.451 0.55-1.451c0.151-0.582 0.629-0.959 1.338-0.768 0.706 0.191 0.931 0.75 0.771 1.333l-0.245 1.532 -0.25 1.534c-0.155 0.576 0.415 1.272 1.121 1.463 0.638 0.364 1.52 0.309 1.82-0.208l0.905-1.26 0.909-1.257c0.305-0.523 0.855-0.767 1.489-0.397 0.638 0.364 0.704 0.969 0.403 1.485l-0.638 1.419 -0.636 1.42c-0.299 0.517 0.071 1.332 0.707 1.702 0.515 0.516 1.379 0.691 1.806 0.266l1.202-0.979 1.206-0.984c0.426-0.425 1.021-0.512 1.539 0.005s0.429 1.115 0.006 1.541l-0.984 1.206 -0.985 1.2c-0.423 0.425-0.27 1.313 0.246 1.83 0.366 0.635 1.155 1.026 1.675 0.727l1.418-0.636 1.415-0.637c0.52-0.3 1.121-0.23 1.487 0.402 0.368 0.636 0.124 1.191-0.393 1.49l-1.259 0.907 -1.262 0.908c-0.521 0.3-0.608 1.196-0.236 1.828 0.184 0.713 0.849 1.293 1.425 1.144l1.533-0.252 1.532-0.25c0.583-0.159 1.144 0.071 1.334 0.771 0.189 0.714-0.188 1.187-0.768 1.344l-1.451 0.543 -1.452 0.555c-0.581 0.157-0.896 0.996-0.707 1.708 0 0.734 0.488 1.468 1.086 1.468l1.547 0.153 1.545 0.157c0.596 0 1.086 0.364 1.09 1.095 0 0.731-0.488 1.092-1.09 1.092l-1.545 0.157 -1.547 0.159c-0.6 0-1.121 0.729-1.121 1.46 -0.19 0.709 0.089 1.547 0.671 1.704l1.448 0.549 1.452 0.549c0.58 0.158 0.96 0.632 0.768 1.339 -0.188 0.706-0.754 0.931-1.328 0.77l-1.535-0.243 -1.534-0.25c-0.575-0.158-1.273 0.415-1.462 1.127 -0.37 0.63-0.315 1.512 0.206 1.811l1.256 0.909 1.263 0.906c0.521 0.306 0.762 0.854 0.396 1.49 -0.37 0.637-0.97 0.703-1.489 0.41l-1.413-0.644 -1.421-0.636c-0.515-0.299-1.336 0.071-1.701 0.704 -0.521 0.523-0.695 1.386-0.271 1.806l0.981 1.209 0.981 1.201c0.424 0.426 0.516 1.021-0.006 1.539 -0.518 0.518-1.115 0.43-1.538 0.006l-1.206-0.98 -1.202-0.982c-0.426-0.426-1.309-0.275-1.828 0.24 -0.636 0.369-1.029 1.156-0.73 1.68l0.64 1.408 0.64 1.42c0.297 0.521 0.229 1.119-0.403 1.488 -0.638 0.367-1.192 0.127-1.493-0.395L59.2 64.895l-0.907-1.258c-0.303-0.521-1.194-0.604-1.832-0.238 -0.708 0.184-1.29 0.848-1.135 1.426l0.248 1.533 0.249 1.531c0.156 0.584-0.066 1.148-0.774 1.338 -0.711 0.186-1.185-0.189-1.339-0.771l-0.551-1.447 -0.553-1.455c-0.153-0.578-0.995-0.895-1.704-0.703 -0.733-0.006-1.468 0.484-1.468 1.082l-0.157 1.551 -0.155 1.545c0 0.598-0.36 1.082-1.094 1.082 -0.732 0-1.09-0.484-1.09-1.082l-0.158-1.545 -0.155-1.551c0-0.598-0.733-1.119-1.468-1.119 -0.704-0.197-1.543 0.086-1.698 0.668l-0.549 1.453 -0.549 1.451c-0.157 0.582-0.632 0.953-1.342 0.76 -0.708-0.183-0.927-0.748-0.773-1.326l0.248-1.533 0.25-1.535c0.153-0.58-1.024-1.205-1.732-1.395 -0.634-0.365 0.303-0.518 0 0l-2.117 1.395 -0.909 1.262c-0.299 0.523-0.852 0.764-1.485 0.398 -0.64-0.371-0.707-0.967-0.405-1.49l0.636-1.412 0.641-1.42c0.298-0.516-0.072-1.334-0.71-1.703 -0.516-0.521-1.381-0.697-1.805-0.271l-1.206 0.984 -1.2 0.978c-0.425 0.424-1.022 0.516-1.544 0 -0.519-0.518-0.43-1.121-0.004-1.543l0.981-1.203 0.983-1.207c0.426-0.42 0.275-1.305-0.241-1.827 -0.364-0.632-1.153-1.029-1.675-0.731l-1.417 0.638 -1.416 0.642c-0.52 0.297-1.122 0.229-1.488-0.408 -0.367-0.638-0.124-1.185 0.396-1.491l1.258-0.909 1.261-0.901c0.521-0.305 0.13-1.578-0.235-2.214 -0.19-0.706 0.58-0.151 0 0l-2.487-0.506 -1.529 0.244c-0.58 0.157-1.146-0.063-1.336-0.771 -0.188-0.713 0.19-1.181 0.768-1.339l1.452-0.551 1.452-0.547c0.58-0.159 0.896-1.001 0.704-1.708 0-0.735-0.485-1.47-1.084-1.47l-1.545-0.155 -1.546-0.153c-0.603 0-1.088-0.366-1.088-1.098 0-0.736 0.485-1.095 1.088-1.095l1.546-0.153 1.545-0.157c0.599 0 1.122-0.733 1.122-1.462 0.189-0.712-0.091-1.545-0.669-1.702l-1.452-0.549 -1.45-0.555c-0.583-0.151-0.959-0.624-0.771-1.332 0.191-0.713 0.754-0.929 1.334-0.779l1.534 0.252 1.533 0.244c0.582 0.157 1.202-0.287 1.396-0.996M48.169 24.2c-10.393 0-18.81 8.424-18.81 18.812 0 10.393 8.417 18.815 18.81 18.815 10.393 0 18.812-8.422 18.812-18.815C66.981 32.624 58.562 24.2 48.169 24.2z">
</path>
</g>
</g>
<path fill="#FFFFFF" d="M60.565 43.012c0 6.906-5.594 12.498-12.498 12.498 -6.902 0-12.494-5.592-12.494-12.498 0-6.902 5.592-12.498 12.494-12.498C54.971 30.514 60.565 36.109 60.565 43.012zM48.201 35.2c-4.351 0-7.874 3.529-7.874 7.882 0 4.35 3.523 7.881 7.874 7.881 4.356 0 7.88-3.53 7.88-7.881C56.081 38.729 52.557 35.2 48.201 35.2z">
</path>
<g class="correct">
<g class="small-cog">
<path fill="#FFFFFF" d="M63.473 70.325c0.268-0.459 0.177-1.014-0.202-1.232l-0.919-0.664 -0.919-0.664c-0.384-0.217-0.562-0.627-0.292-1.086 0.27-0.465 0.707-0.516 1.091-0.295l1.032 0.463 1.037 0.467c0.378 0.219 0.975-0.053 1.242-0.518 0.382-0.377 0.512-1.012 0.2-1.32l-0.716-0.881 -0.725-0.873c-0.309-0.318-0.375-0.752 0.006-1.129 0.38-0.379 0.819-0.314 1.126-0.004l0.882 0.713 0.879 0.725c0.311 0.307 0.872 0.248 1.25-0.127l0.177-0.104c0.464-0.273 0.661-0.793 0.444-1.176l-0.466-1.031 -0.465-1.041c-0.222-0.379-0.173-0.813 0.291-1.08 0.465-0.271 0.868-0.098 1.091 0.281l0.665 0.924 0.663 0.922c0.218 0.381 0.875 0.443 1.338 0.172 0.518-0.133 0.94-0.619 0.83-1.045l-0.179-1.113 -0.184-1.125c-0.116-0.42 0.046-0.836 0.565-0.975 0.517-0.135 0.865 0.139 0.976 0.566l0.401 1.055 0.407 1.066c0.11 0.418 0.722 0.652 1.241 0.512 0.535 0 1.074-0.355 1.074-0.791l0.114-1.129 0.114-1.133c0-0.439 0.264-0.793 0.799-0.793 0.535 0 0.801 0.354 0.801 0.793l0.112 1.133 0.114 1.129c0 0.436 0.437 0.596 0.972 0.596l0.199 0.053c0.519 0.137 1.03 0.104 1.143-0.32l0.401-1.061 0.407-1.061c0.108-0.426 0.459-0.701 0.975-0.561 0.516 0.141 0.679 0.547 0.566 0.973l-0.181 1.121 -0.185 1.121c-0.108 0.424 0.309 0.93 0.824 1.072 0.467 0.266 1.106 0.227 1.322-0.154l0.667-0.918 0.665-0.926c0.219-0.373 0.626-0.555 1.091-0.287 0.46 0.27 0.513 0.707 0.293 1.088l-0.467 1.031 -0.468 1.039c-0.215 0.381 0.055 0.98 0.521 1.248 0.376 0.379 1.005 0.504 1.316 0.193l0.879-0.711 0.882-0.723c0.309-0.311 0.746-0.373 1.125 0.004 0.378 0.381 0.313 0.816 0.004 1.125l-0.718 0.881 -0.718 0.883c-0.31 0.309-0.205 0.955 0.177 1.332 0.266 0.467 0.842 0.756 1.224 0.539l1.035-0.469 1.037-0.469c0.382-0.219 0.818-0.168 1.086 0.293 0.268 0.469 0.095 0.871-0.287 1.088l-0.921 0.67 -0.921 0.664c-0.382 0.215-0.446 0.877-0.177 1.338 0.14 0.514 0.621 0.939 1.047 0.826l1.119-0.18 1.119-0.184c0.426-0.109 0.835 0.047 0.975 0.568 0.142 0.518-0.136 0.861-0.562 0.975l-1.061 0.402 -1.063 0.404c-0.421 0.113-0.655 0.727-0.513 1.244 0 0.539 0.352 1.076 0.793 1.076l1.127 0.115 1.13 0.115c0.44 0 0.795 0.264 0.795 0.799 0 0.537-0.354 0.799-0.795 0.799l-1.13 0.113 -1.127 0.111c-0.441 0.004-0.821 0.537-0.821 1.076 -0.136 0.514 0.065 1.125 0.49 1.236l1.059 0.406 1.061 0.4c0.429 0.115 0.702 0.461 0.563 0.98 -0.138 0.516-0.551 0.678-0.976 0.563l-1.119-0.182 -1.12-0.176c-0.425-0.119-0.931 0.299-1.07 0.814 -0.268 0.465-0.23 1.111 0.151 1.328l0.921 0.664 0.921 0.662c0.382 0.219 0.557 0.625 0.289 1.088 -0.268 0.469-0.706 0.518-1.088 0.301l-1.035-0.469 -1.037-0.467c-0.379-0.219-0.978 0.055-1.245 0.516 -0.378 0.381-0.504 1.01-0.194 1.322l0.716 0.881 0.716 0.879c0.313 0.311 0.378 0.746-0.004 1.127 -0.378 0.375-0.813 0.311-1.125 0l-0.88-0.717 -0.879-0.713c-0.31-0.311-0.959-0.207-1.337 0.174 -0.462 0.268-0.751 0.844-0.531 1.223l0.463 1.033 0.469 1.039c0.216 0.383 0.169 0.82-0.296 1.088 -0.464 0.266-0.869 0.094-1.09-0.289l-0.665-0.922 -0.665-0.92c-0.213-0.381-0.868-0.447-1.336-0.174 -0.514 0.135-0.942 0.619-0.83 1.043l0.183 1.121 0.182 1.119c0.117 0.42-0.048 0.838-0.564 0.975 -0.521 0.137-0.863-0.137-0.977-0.563l-0.403-1.061 -0.401-1.059c-0.114-0.43-0.729-0.658-1.246-0.517 -0.539 0-1.076 0.354-1.076 0.789l-0.114 1.133 -0.115 1.125c0 0.445-0.26 0.799-0.793 0.799 -0.537 0-0.801-0.354-0.801-0.799l-0.116-1.125 -0.114-1.133c0-0.435-0.535-0.816-1.068-0.816 -0.521-0.141-1.13 0.068-1.246 0.49l-0.401 1.061 -0.403 1.061c-0.112 0.424-0.456 0.701-0.979 0.561 -0.514-0.143-0.679-0.551-0.561-0.973l0.179-1.121 0.181-1.127c0.114-0.416-0.743-0.873-1.259-1.018 -0.465-0.266 0.217-0.379 0 0l-1.551 1.029 -0.665 0.914c-0.216 0.381-0.623 0.561-1.086 0.295 -0.466-0.273-0.516-0.709-0.293-1.094l0.46-1.033 0.469-1.035c0.216-0.381-0.054-0.979-0.518-1.244 -0.38-0.381-1.012-0.512-1.32-0.203l-0.882 0.721 -0.875 0.723c-0.31 0.31-0.752 0.369-1.126-0.01 -0.382-0.379-0.316-0.811-0.006-1.121l0.719-0.883 0.718-0.875c0.307-0.309 0.201-0.963-0.177-1.342 -0.268-0.465-0.847-0.746-1.226-0.529l-1.035 0.465 -1.035 0.465c-0.38 0.219-0.818 0.17-1.084-0.293 -0.27-0.467-0.093-0.871 0.285-1.094l0.921-0.662 0.923-0.664c0.378-0.219 0.094-1.148-0.172-1.609 -0.142-0.521 0.422-0.119 0 0l-1.821-0.375 -1.116 0.184c-0.427 0.109-0.836-0.049-0.976-0.568 -0.138-0.518 0.134-0.867 0.557-0.975l1.066-0.41 1.061-0.395c0.423-0.113 0.653-0.73 0.512-1.25 0-0.535-0.354-1.072-0.791-1.072l-1.129-0.115 -1.13-0.113c-0.438 0-0.795-0.262-0.795-0.799 0-0.537 0.356-0.801 0.795-0.801l1.13-0.113 1.129-0.115c0.437 0 0.82-0.533 0.82-1.07 0.138-0.518-0.065-1.125-0.487-1.24l-1.064-0.402 -1.061-0.404c-0.424-0.113-0.697-0.459-0.56-0.977 0.136-0.518 0.55-0.68 0.975-0.572l1.123 0.186 1.116 0.184c0.427 0.115 0.881-0.217 1.02-0.732M78.246 62.92c-7.595 0-13.751 6.154-13.751 13.746 0 7.598 6.156 13.748 13.751 13.748 7.592 0 13.748-6.15 13.748-13.748C91.994 69.075 85.837 62.92 78.246 62.92z">
</path>
</g>
</g>
<path fill="#FFFFFF" d="M87.301 76.666c0 5.041-4.089 9.137-9.134 9.137 -5.043 0-9.132-4.096-9.132-9.137 0-5.047 4.089-9.135 9.132-9.135C83.212 67.532 87.301 71.62 87.301 76.666zM78.268 70.956c-3.18 0-5.758 2.58-5.758 5.762 0 3.18 2.578 5.758 5.758 5.758 3.18 0 5.757-2.578 5.757-5.758C84.025 73.536 81.448 70.956 78.268 70.956z">
</path>
</svg>
</a>
我正在尝试在悬停，焦点等上旋转齿轮360度，但这在Firefox中不起作用。我试图实现我在这里找到的修复程序：http://jsfiddle.net/4h3xL/1/但我似乎无法在Firefox中使用它。
我的CSS代码如下：
.services {
color:$body-colour;
a {
display:block;
}
svg {
display:block;
margin:0 auto;
width:30%;
@include mq($from:tablet) {
width:40%;
}
}
}
/* ================================
Animation Keyframes
================================ */
@keyframes spin {
100% { transform:rotate(360deg); }
}
// Service icon hover animations
svg {
.correct {
transform: translate(62px, 55.5px);
circle, path, line, polygon {
transform:translate(-62px, -55.5px);
}
}
}
.services a {
.large-cog {
transform-origin:50% 50%;
transform:rotate(0);
}
&:hover, &:focus, &:active {
.large-cog {
animation:spin 6s linear infinite;
}
}
}
在“正确”类中将路径等包装成适用于其他在Firefox中行为不当的动画，但对于这个特定的SVG图标，它将无法正常工作。
有没有人有任何想法，或者任何人都能看到我做错了什么？
非常感谢任何帮助。
干杯 JP
答案 0 :(得分：0)
使用像素而不是变换原点
的百分比来计算出来