SVG加载程序在Firefox中无法正确旋转

Question

我正在尝试将svg加载程序从smil动画更新为css动画。

这是原始的svg和CSS动画：

 svg path { -webkit-animation: spin 0.6s linear infinite; -moz-animation: spin 3s linear infinite; animation: spin 0.6s linear infinite; } @-moz-keyframes spin { 0% { -moz-transform: rotate(0deg); -moz-transform-origin: 100% 100%; } 100% { -moz-transform: rotate(360deg); -moz-transform-origin: 100% 100%; } } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); -webkit-transform-origin: 100% 100%; } 100% { -webkit-transform: rotate(360deg); -webkit-transform-origin: 100% 100%; } } @keyframes spin { 0% { transform:rotate(0deg); transform-origin: 100% 100%; } 100% { transform:rotate(360deg); transform-origin: 100% 100%; } } 

 <svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="130px" height="130px" viewBox="0 0 80 80" style="enable-background:new 0 0 80 80;" xml:space="preserve"> <path fill="#000" d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z"> <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite" /> </path> </svg> 

在Chrome浏览器中看起来正确，但在Firefox中则完全错误，我不明白为什么（尝试使用Codepen来了解我的意思）。 有什么想法吗？

Answer 1

丢掉你的svg =））

 .loader { width:50px; height:50px; border:solid 7px transparent; border-top-color:rgba(0, 0, 0, .87); border-radius:55%; animation: spin 1s linear infinite; } @keyframes spin { 100% {transform:rotateZ(360deg)} } 

 <hr class="loader"> 

Answer 2

它在Chrome中也不适合我。 无论如何，至少对于最近的Chrome而言并非如此-它们具有正确的transform-origin 。

 #loader-2 path { -webkit-animation: spin 0.6s linear infinite; -moz-animation: spin 3s linear infinite; animation: spin 0.6s linear infinite; } @-moz-keyframes spin { 0% { -moz-transform: rotate(0deg); -moz-transform-origin: 100% 100%; } 100% { -moz-transform: rotate(360deg); -moz-transform-origin: 100% 100%; } } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); -webkit-transform-origin: 100% 100%; } 100% { -webkit-transform: rotate(360deg); -webkit-transform-origin: 100% 100%; } } @keyframes spin { 0% { transform:rotate(0deg); transform-origin: 100% 100%; } 100% { transform:rotate(360deg); transform-origin: 100% 100%; } } 

 <svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="130px" height="130px" viewBox="0 0 80 80" style="enable-background:new 0 0 80 80;" xml:space="preserve"> <path fill="#000" d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z"> <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite" /> </path> </svg> <svg version="1.1" id="loader-2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="130px" height="130px" viewBox="0 0 80 80" style="enable-background:new 0 0 80 80;" xml:space="preserve"> <path fill="#000" d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z"/> </svg> 

问题在于，在SVG中，相对于整个SVG会计算出transform-origin坐标的百分比。 不是使用它们的元素。

因此transform-origin: 100% 100%; 这里是指SVG的右下角。 不是<path>的右下角。

解决方法是告诉浏览器您要计算相对于路径的原点。 您可以使用以下属性进行操作：

transform-box: fill-box;

演示：

 #loader-2 path { -webkit-animation: spin 0.6s linear infinite; -moz-animation: spin 3s linear infinite; animation: spin 0.6s linear infinite; transform-box: fill-box; } @-moz-keyframes spin { 0% { -moz-transform: rotate(0deg); -moz-transform-origin: 100% 100%; } 100% { -moz-transform: rotate(360deg); -moz-transform-origin: 100% 100%; } } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); -webkit-transform-origin: 100% 100%; } 100% { -webkit-transform: rotate(360deg); -webkit-transform-origin: 100% 100%; } } @keyframes spin { 0% { transform:rotate(0deg); transform-origin: 100% 100%; } 100% { transform:rotate(360deg); transform-origin: 100% 100%; } } 

 <svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="130px" height="130px" viewBox="0 0 80 80" style="enable-background:new 0 0 80 80;" xml:space="preserve"> <path fill="#000" d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z"> <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite" /> </path> </svg> <svg version="1.1" id="loader-2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="130px" height="130px" viewBox="0 0 80 80" style="enable-background:new 0 0 80 80;" xml:space="preserve"> <path fill="#000" d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z"/> </svg>