小编Ale*_*lex的帖子

你可能知道昨晚发布了一个新的Safari:Safari 11.这个最后一个版本创建了一个SVG动画的bug,它在safari 10上工作正常,或者仍在chrome上工作:

我只是没有找到如何解决这个问题,我尝试了一切,-webkit- subfix,容器,原产地等...... 

有人有想法吗？

这是直到最后一个版本的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 …