Safari 11 中的 SVG 动画错误

Question

您可能知道昨晚发布了新的 Safari：Safari 11。 最后一个版本在 SVG 动画上创建了一个错误，该错误在 safari 10 上运行良好或仍然在 chrome 上运行：

我只是不知道如何解决这个问题，我尝试了所有方法，-webkit- 子修复、容器、来源等……

有人可以有一个想法吗？

这是在 Safari 上一个版本之前可用的版本：https://jsfiddle.net/3f02je66/

.home_st0 {fill:#FFFFFF;}
.home_st1 {fill:#6CC3BD;}
.home_st2 {fill:none;stroke:#FFFFFF;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:200;stroke-dashoffset:200;}
.home_st3 {fill:none;stroke:#FFFFFF;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:20;stroke-dashoffset:20;}
.home_st4 {fill:none;stroke:#FFFFFF;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:50;stroke-dashoffset:50;}

#casserole {stroke-dasharray:200; stroke-dashoffset:200;}
#casserolePL {stroke-dasharray:20; stroke-dashoffset:20; }
#casserolePR {stroke-dasharray:20; stroke-dashoffset:20; }
#casseroleL {stroke-dasharray:50;  stroke-dashoffset:50;}
#casserole {animation: casserole .8s ease-in-out forwards .8s;}
    @keyframes casserole {
        from{stroke-dashoffset:200; }
        to {stroke-dashoffset:0;}
    }
#casserolePL {animation: casserolePL .5s ease-in-out forwards 1s;}
    @keyframes casserolePL {
        from{stroke-dashoffset:20; }
        to {stroke-dashoffset:40;}
    }
#casserolePR {animation: casserolePR .5s ease-in-out forwards 1.1s;}
    @keyframes casserolePR {
        from{stroke-dashoffset:20; }
        to {stroke-dashoffset:0;}
    }
#casseroleL {animation: casseroleL .5s ease-in-out forwards 1.2s;}
    @keyframes casseroleL {
        from{stroke-dashoffset:50; }
        to {stroke-dashoffset:100;}
    }

#aubergine {transform: translate(45%, 0%) rotate(0deg); transform-origin:center center;}
#aubergine {animation: aubergine 10s linear infinite 1.5s;}
    @keyframes aubergine {
        0%{transform: translate(45%, 0%) rotate(0deg);}
        20%,100% {transform: translate(45%, 400%) rotate(200deg);}
    }
#poisson {transform: translate(45%, 0%) rotate(0deg); transform-origin:center center;}
#poisson {animation: poisson 10s linear infinite 1.5s;}
    @keyframes poisson {
        9%{transform: translate(45%, 0%) rotate(0deg);}
        29%,100% {transform: translate(40%, 400%) rotate(-240deg);}
    }
#carotte {transform: translate(45%, 0%) rotate(0deg); transform-origin:center center;}
#carotte {animation: carotte 10s linear infinite 1.5s;}
    @keyframes carotte {
        18%{transform: translate(45%, 0%) rotate(0deg);}
        38%,100% {transform: translate(0%, 400%) rotate(-100deg);}
    }
#pois {transform: translate(-20%, 0%) rotate(0deg); transform-origin:center center;}
#pois {animation: pois 10s linear infinite 1.5s;}
    @keyframes pois {
        27%{transform: translate(45%, 0%) rotate(0deg);}
        47%,100% {transform: translate(0%, 420%) rotate(160deg);}
    }
#poulet {transform: translate(-20%, 0%) rotate(0deg); transform-origin:center center;}
#poulet {animation: poulet 10s linear infinite 1.5s;}
    @keyframes poulet {
        36%{transform: translate(-20%, 0%) rotate(0deg);}
        56%,100% {transform: translate(-20%, 400%) rotate(300deg);}
    }
#feuille {transform: translate(-50%, 0%) rotate(0deg); transform-origin:center center;}
#feuille {animation: feuille 10s linear infinite 1.5s;}
    @keyframes feuille {
        45%{transform: translate(-40%, 0%) rotate(0deg);}
        65%,100% {transform: translate(15%, 400%) rotate(60deg);}
    }
#navet {transform: translate(15%, 0%) rotate(0deg); transform-origin:center center;}
#navet {animation: navet 10s linear infinite 1.5s;}
    @keyframes navet {
        54%{transform: translate(20%, 0%) rotate(0deg);}
        74%,100% {transform: translate(-35%, 460%) rotate(360deg);}
    }
#crevette {transform: translate(-15%, 0%) rotate(0deg); transform-origin:center center;}
#crevette {animation: crevette 10s linear infinite 1.5s;}
    @keyframes crevette {
        63%{transform: translate(-15%, 0%) rotate(0deg);}
        83%,100% {transform: translate(15%, 400%) rotate(-160deg);}
    }
#oignon {transform: translate(45%, 0%) rotate(0deg); transform-origin:center center;}
#oignon {animation: oignon 10s linear infinite 1.5s;}
    @keyframes oignon {
        72%{transform: translate(45%, 0%) rotate(0deg);}
        92%,100%  {transform: translate(40%, 500%) rotate(-240deg);}
    }
#poivron {transform: translate(10%, 0%) rotate(0deg); transform-origin:center center;}
#poivron {animation: poivron 10s linear infinite 1.5s;}
    @keyframes poivron {
        81%{transform: translate(10%, 0%) rotate(0deg);}
        99%,100% {transform: translate(20%, 440%) rotate(140deg);}
    }

Answer 1

您正在为translate() 转换使用百分比值。这就提出了一个问题：百分比是什么？

Google Chrome 和 Safari 10 使用 "the bounding box of the transformed element" 回答问题。那是来自 CSS 转换定义的 2013 年“工作草案”

Firefox 和 Safari 11 以 "the size of the local viewport" 回答。 （在您的情况下，<svg> 元素的大小）。这是来自 CSS 转换定义的最新“编辑草稿”版本。

您可以尝试通过设置transform-box:fill-box 来恢复之前的行为。

更好的解决方案不是使用相对值，而是使用像素值。由于您的动画元素都在 25 像素的宽度和高度范围内，因此将当前值除以 4 并将 % 交换为 px 应该可以为您微调这些值提供一个不错的开始。