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 here来了解我的意思）。有什么想法吗？

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>

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

2 个答案: