Safari 11中的SVG动画错误 [英] SVG animation bug in safari 11
问题描述
您可能知道昨晚发布了一个新的Safari：Safari11。
最后一个版本在SVG动画上创建了一个错误，该错误在safari 10上运行正常，或者在chrome上仍然可以运行：
As you may know there is a new Safari released last night: Safari 11. And this last version create a bug on SVG animation that was working fine on safari 10 or still work on chrome :
我只是不知道如何解决这个问题，我尝试了所有方法，-webkit-子修补程序，容器，来源等……
And I just don't find how to fix this, I tried everything, -webkit- subfix, container, origin etc …
有人可以有个主意吗？
Can someone have an idea ?
以下是直到Safari的最后一个版本都可以使用的版本： https://jsfiddle.net/3f02je66/
Here is the version that was working until the last version of 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);}
}
推荐答案
您正在使用百分比值进行 translate（）转换。这就提出了一个问题：百分比是多少？
You are using percentage values for translate() transformations. That raises the question: percentage of what?
Google Chrome和Safari 10使用已转换元素的边界框 。那是从2013年CSS转换定义的工作草案中获得的
Google Chrome and Safari 10 answer the question with "the bounding box of the transformed element". That is from the 2013 "Working Draft" of the CSS Transforms definition
Firefox和Safari 11使用本地视口的大小 。 （在您的情况下，< svg> 元素的大小）。这来自CSS Transforms定义的最新编辑器草案版本。
Firefox and Safari 11 answer with "the size of the local viewport". (in your case, the size of the <svg> element). That is from the latest "Editor's Draft" version of the CSS Transforms definition.
您可以尝试通过设置 transform-box来恢复以前的行为。 ：fill-box 。
更好的解决方案是不使用相对值，而是使用像素值。由于您的动画元素都在25px的宽度和高度范围内，因此将当前值除以4，然后将％交换为 px 应该为您微调这些值提供一个不错的开始。
The better solution is not to use relative, but pixel values. Since your animated elements are all in the range of 25px width and height, dividing the current value by 4 and exchanging % for px should give you a decent start for fine-tuning these values.
这篇关于Safari 11中的SVG动画错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
