Question

尝试使用两个齿轮进行基本加载svg。虽然在Firefox中，这看起来效果很好，但在Chrome中却没有。

这是jsfiddle：https://jsbin.com/suhavoyopo/1/edit?html,css,output

有什么建议吗？

以下是使用的CSS：

.container {
  width: 100px;
  height: 100px;
}

.first {
  transform-origin: 30% 30%;
  animation: spin 4s infinite linear;
}

.second {
  transform-origin: 70% 70%;
  animation: spin 4s infinite reverse linear;
}

@keyframes spin {
  100% {transform: rotate(360deg) }
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="container"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
  <g class="first">
    <path  fill="#8f7f59" d="M79.9 52.6c.1-.8.1-1.7.1-2.6s0-1.8-.1-2.6l-5.1-.4c-.3-2.4-.9-4.6-1.8-6.7l4.2-2.9c-.7-1.6-1.6-3.1-2.6-4.5L70 35c-1.4-1.9-3.1-3.5-4.9-4.9l2.2-4.6c-1.4-1-2.9-1.9-4.5-2.6l-3 4.1c-2.1-.9-4.4-1.5-6.7-1.8l-.4-5.1c-.9-.1-1.8-.1-2.7-.1s-1.8 0-2.6.1l-.4 5.1c-2.4.3-4.6.9-6.7 1.8l-2.9-4.1c-1.6.7-3.1 1.6-4.5 2.6l2.1 4.6c-1.9 1.4-3.5 3.1-5 4.9l-4.5-2.1c-1 1.4-1.9 2.9-2.6 4.5l4.1 2.9c-.9 2.1-1.5 4.4-1.8 6.8l-5 .4c-.2.7-.2 1.6-.2 2.5s0 1.8.1 2.6l5 .4c.3 2.4.9 4.7 1.8 6.8l-4.1 2.9c.7 1.6 1.6 3.1 2.6 4.5l4.5-2.1c1.4 1.9 3.1 3.5 5 4.9l-2.1 4.6c1.4 1 2.9 1.9 4.5 2.6l2.9-4.1c2.1.9 4.4 1.5 6.7 1.8l.4 5.1H50s1.8 0 2.6-.1l.4-5.1c2.3-.3 4.6-.9 6.7-1.8l2.9 4.2c1.6-.7 3.1-1.6 4.5-2.6L65 69.9c1.9-1.4 3.5-3 4.9-4.9l4.6 2.2c1-1.4 1.9-2.9 2.6-4.5L73 59.8c.9-2.1 1.5-4.4 1.8-6.7l5.1-.5zM50 65c-8.3 0-15-6.7-15-15s6.7-15 15-15 15 6.7 15 15-6.7 15-15 15z" transform="translate(-20 -20)">
    </path>
  </g>
  <g class="second">
    <path fill="#9f9fab" d="M79.9 52.6c.1-.8.1-1.7.1-2.6s0-1.8-.1-2.6l-5.1-.4c-.3-2.4-.9-4.6-1.8-6.7l4.2-2.9c-.7-1.6-1.6-3.1-2.6-4.5L70 35c-1.4-1.9-3.1-3.5-4.9-4.9l2.2-4.6c-1.4-1-2.9-1.9-4.5-2.6l-3 4.1c-2.1-.9-4.4-1.5-6.7-1.8l-.4-5.1c-.9-.1-1.8-.1-2.7-.1s-1.8 0-2.6.1l-.4 5.1c-2.4.3-4.6.9-6.7 1.8l-2.9-4.1c-1.6.7-3.1 1.6-4.5 2.6l2.1 4.6c-1.9 1.4-3.5 3.1-5 4.9l-4.5-2.1c-1 1.4-1.9 2.9-2.6 4.5l4.1 2.9c-.9 2.1-1.5 4.4-1.8 6.8l-5 .4c-.2.7-.2 1.6-.2 2.5s0 1.8.1 2.6l5 .4c.3 2.4.9 4.7 1.8 6.8l-4.1 2.9c.7 1.6 1.6 3.1 2.6 4.5l4.5-2.1c1.4 1.9 3.1 3.5 5 4.9l-2.1 4.6c1.4 1 2.9 1.9 4.5 2.6l2.9-4.1c2.1.9 4.4 1.5 6.7 1.8l.4 5.1H50s1.8 0 2.6-.1l.4-5.1c2.3-.3 4.6-.9 6.7-1.8l2.9 4.2c1.6-.7 3.1-1.6 4.5-2.6L65 69.9c1.9-1.4 3.5-3 4.9-4.9l4.6 2.2c1-1.4 1.9-2.9 2.6-4.5L73 59.8c.9-2.1 1.5-4.4 1.8-6.7l5.1-.5zM50 65c-8.3 0-15-6.7-15-15s6.7-15 15-15 15 6.7 15 15-6.7 15-15 15z" transform="rotate(15 -15.958 135.958)">
    </path>
  </g>
</svg>
</div>
</body>
</html>

Answer 1

将-webkit-transform-origin设置为50%，就像这样

.first {
  transform-origin: 30% 30%;
  -webkit-transform-origin: 50% 50%;
  animation: spin 4s infinite linear;
}

.second {
  transform-origin: 70% 70%;
  -webkit-transform-origin: 50% 50%;
  animation: spin 4s infinite reverse linear;
}

此处的完整示例https://jsfiddle.net/ynnbbzcy/

CSS transform-origin跨浏览器不一致

1 个答案: