animation - 转换框 : fill-box and firefox 的问题

Question

我在 Firefox 中遇到了 svg 文件的问题，我可以将其归结为以下代码(原始图像有几行代码):

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="15 15 70 70">
<style type="text/css"><![CDATA[
    .sun {
        transform-box: fill-box;
        animation-name: sun-spoke-rotate;
        transform-origin: 50%;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        animation-duration: 6s;
    }

    .sun path {
        transform-box: fill-box;
        animation-name: sun-spoke-scale;
        transform-origin: 50%;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        animation-duration: 6s;
    }

    @keyframes sun-spoke-scale {
        0%   { transform: scale(1,1) }
        100% { transform: scale(.5,.5) }
    }

    @keyframes sun-spoke-rotate {
        0%   { transform: rotate(0); }
        100% { transform: rotate(360deg); }
    }

]]></style>

<g class="cloud">
    <g class="sun">
        <path
            d="M80.029,43.611h-3.998c-1.105,0-2-0.896-2-1.999s0.895-2,
            2-2h3.998c1.104,0,2,0.896,2,2S81.135,43.611,80.029,43.611z"/>

        <path
            d="M58.033,25.614c-1.105,0-2-0.896-2-2v-3.999c0-1.104,0.895-2,2-2c1.104,
            0,2,0.896,2,2v3.999C60.033,24.718,59.135,25.614,58.033,25.614z"/>

        <path
            d="M42.033,41.612c0,1.104-0.896,1.999-2,1.999h-4c-1.104,
            0-1.998-0.896-1.998-1.999s0.896-2,1.998-2h4C41.139,39.612,42.033,40.509,42.033,41.612z"/>

        <path
            d="M58.033,57.61c1.104,0,2,0.895,2,1.999v4c0,1.104-0.896,2-2,2c-1.105,
            0-2-0.896-2-2v-4C56.033,58.505,56.928,57.61,58.033,57.61z"/>

        <circle
            style="paint-order: stroke; fill: #f0daba; stroke: #4a4f55; stroke-width: 8px"
            cx="58.033"
            cy="41.612"
            r="7.999"/>
    </g>
</g>

这在 chrome 和最新版本的 Edge 中按预期工作。它当然在 Internet Explorer 中根本不起作用，但真正困扰我的是我在 Firefox 中也有问题。它运行良好 --- 直到我开始移动鼠标？？!!然后它开始到处跳。我认为它与转换框:填充框有关。有任何想法吗？

Answer 1

替换 transform-origin 中的 50%以像素为单位的旋转中心坐标
您可以使用 Javascript getBBox() 获取旋转中心的坐标。方法
属性(property)transform-box: fill-box;在这种情况下必须从 CSS 规则中删除

// Calculating the center of rotation
let bb = sun.getBBox(); 
console.log(bb.x + bb.width / 2); 
console.log(bb.y + bb.height / 2);

<svg xmlns="http://www.w3.org/2000/svg"  version="1.1" viewBox="15 15 70 70" style="border:1px solid;">
<style type="text/css"><![CDATA[
    #sun {
        animation-name: sun-spoke-rotate;
        transform-origin: 58.03px 41.61px;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        animation-duration: 6s;
    }

   

    @keyframes sun-spoke-rotate {
        0%   { transform: rotate(0); }
        100% { transform: rotate(360deg); }
    } 
    
    #sun path {
        animation-name: sun-spoke-scale;
        transform-origin: 58.03px 41.61px;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        animation-duration: 6s;
    }

    @keyframes sun-spoke-scale {
        0%   { transform: scale(1,1) }
        100% { transform: scale(.5,.5) }
    }

    @keyframes sun-spoke-rotate {
        0%   { transform: rotate(0); }
        100% { transform: rotate(360deg); }
    }

]]></style>

<g class="cloud">
    <g id="sun">
        <path
            d="M80.029,43.611h-3.998c-1.105,0-2-0.896-2-1.999s0.895-2,
            2-2h3.998c1.104,0,2,0.896,2,2S81.135,43.611,80.029,43.611z"/>

        <path
            d="M58.033,25.614c-1.105,0-2-0.896-2-2v-3.999c0-1.104,0.895-2,2-2c1.104,
            0,2,0.896,2,2v3.999C60.033,24.718,59.135,25.614,58.033,25.614z"/>

        <path
            d="M42.033,41.612c0,1.104-0.896,1.999-2,1.999h-4c-1.104,
            0-1.998-0.896-1.998-1.999s0.896-2,1.998-2h4C41.139,39.612,42.033,40.509,42.033,41.612z"/>

        <path
            d="M58.033,57.61c1.104,0,2,0.895,2,1.999v4c0,1.104-0.896,2-2,2c-1.105,
            0-2-0.896-2-2v-4C56.033,58.505,56.928,57.61,58.033,57.61z"/>

        <circle
            style="paint-order: stroke; fill: #f0daba; stroke: #4a4f55; stroke-width: 8px"
            cx="58.033"
            cy="41.612"
            r="7.999"/> 
            <circle
           
    </g>
</g>