我正在使用svg和CSS动画，但是在使用animateMotion元素时遇到一些问题。
以下动画在Firefox中不起作用
=IF(ISERROR(VLOOKUP(SUBSTITUTE(C1,"*","~*"),A:A,1,0)),"Missing","Found")
答案 0 :(得分：1)
在平面上使用transform属性，而不是尝试使用CSS对其进行变换。即
<g id="plane" transform="translate(-350, -180)"
.loading{
width: 300px;
height: 300px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.globe {
width: 100%;
height: 100%;
border-radius: 50%;
position: absolute;
overflow: hidden;
}
svg {
width: 100%;
height: 100%;
}
.track-line{
stroke-dasharray: 10;
animation: dash 5s linear infinite;
}
#earth{
transform-origin: center;
transform-box: fill-box;
animation: rotation 10s linear 0s infinite;
}
@keyframes dash {
0%{
stroke-dasharray: 0;
stroke-dashoffset: 50;
}
25%{
stroke-dasharray: 100;
stroke-dashoffset: 100;
}
50%{
stroke-dasharray: 277.87969970703125;
stroke-dashoffset: 150;
}
75%{
stroke-dasharray: 100;
stroke-dashoffset: 100;
}
100%{
stroke-dasharray: 0;
stroke-dashoffset: 50;
}
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-360deg);
}
}<div class="loading">
<div class="globe">
<svg width="612px" height="792px" viewBox="0 0 612 792">
<!-- 飛機飛行軌道 plane track -->
<path id="planePath" fill="none" d="M553.5,396c0,136.69-110.81,247.5-247.5,247.5S58.5,532.69,58.5,396S169.31,148.5,306,148.5
S553.5,259.31,553.5,396z" />
<!-- 飛機 plane-->
<g id="plane" transform="translate(-350, -180)">
<!-- 飛機尾線 plane line -->
<g>
<path class="track-line" fill="none" stroke="#51AAF8" stroke-width="5" stroke-miterlimit="10"
stroke-dasharray="11.9216,11.9216" d="
M70.165,454.81c-4.662-18.767-7.054-38.37-7.054-58.451c0-77.217,35.979-145.947,91.921-190.533" />
</g>
<polygon fill="#FFFFFF" points="132.441,209.412 143.318,197.22 154.673,187.298 166.507,184.908 169.495,192.319
162.563,209.412 153.956,221.484 152.282,226.863 169.495,274.915 159.574,285.792 132.441,245.51 112.36,267.026
123.237,292.964 112.36,302.168 95.625,274.676 63.113,258.778 70.882,247.901 94.072,254.595 114.63,232.123 72.556,210.607
81.521,199.013 " />
<g>
<path fill="#51AAF8" d="M174.516,191.482c0.119-2.988-1.076-5.857-3.347-7.77c-2.271-1.913-5.26-2.749-8.248-2.151
c-7.411,1.554-14.104,5.618-19.006,11.236l-10.758,12.431L81.042,194.59c-1.314-0.239-2.63,0.239-3.467,1.195l-10.04,11.714
c-0.718,0.837-1.076,2.032-0.718,3.108c0.239,1.076,1.076,2.032,2.032,2.51l42.075,18.049l-15.658,18.288l-24.624-4.901
c-1.314-0.239-2.51,0.239-3.347,1.195L58.69,255.79c-0.717,0.836-1.075,2.032-0.717,3.107c0.239,1.076,0.956,2.032,2.032,2.51
l32.034,14.583l19.125,29.524c0.598,0.957,1.673,1.554,2.749,1.554c0.119,0,0.358,0,0.479,0c0.956-0.12,1.793-0.478,2.391-1.195
l8.605-10.041c0.837-0.957,1.076-2.271,0.598-3.586l-8.486-23.667l15.658-18.288l24.146,38.848
c0.598,0.956,1.674,1.554,2.749,1.673c0.239,0,0.359,0,0.598,0c0.957-0.12,1.793-0.478,2.391-1.195l10.041-11.714
c0.837-0.957,1.076-2.391,0.598-3.586l-18.288-49.964l10.758-12.431C171.169,206.304,174.037,199.013,174.516,191.482
L174.516,191.482z M110.806,265.591c-0.837,0.957-1.076,2.271-0.598,3.586l8.486,23.667l-4.184,4.9l-17.213-26.297
c-0.358-0.598-0.836-0.956-1.554-1.314l-28.688-13.029l4.184-4.9l24.624,4.9c1.314,0.239,2.51-0.239,3.347-1.195l49.964-58.211
c3.944-4.542,9.204-7.77,15.061-8.965c1.076-0.239,1.793,0.239,2.152,0.598c0.358,0.358,0.956,0.956,0.836,2.032
c-0.358,5.977-2.629,11.714-6.574,16.256L110.806,265.591z M76.261,208.575l5.498-6.455l46.14,9.324l-12.073,14.104
L76.261,208.575z M166.507,274.915l-5.498,6.455l-22.831-36.577l12.073-14.104L166.507,274.915z" />
</g>
<!-- 設定路徑動畫 set path animation -->
<animateMotion xlink:href="#plane" dur="3s" begin="0s" fill="freeze" repeatCount="indefinite" rotate="auto">
<mpath xlink:href="#planePath" />
</animateMotion>
</g>
<!-- 地球 earth -->
<g id="earth">
<path fill="#51AAF8" d="M418.24,284.478c-62.036-62.037-161.605-62.037-223.762,0c-61.918,61.917-62.276,161.486,0,223.763
c62.036,62.036,161.605,62.036,223.762,0C480.277,446.084,480.277,346.514,418.24,284.478z M431.269,333.724
c-4.423,8.965-16.137,32.154-30.241,54.506c-24.504,38.608-41.119,50.322-47.933,48.649c-1.314-0.358-4.063-0.956-5.021-8.846
c-1.435-11.475,2.151-27.134,2.151-36.576c0-5.499-2.031-15.42-15.419-20.44c-6.694-2.51-14.583-3.228-22.233-4.064
c-5.02-0.479-13.507-1.315-15.538-2.75c-2.511-1.913-2.63-3.108-2.75-3.466c-0.598-4.303,5.977-12.67,10.28-18.288
c4.9-6.335,9.442-12.192,10.758-18.408c1.195-5.857,1.195-17.212-13.627-48.291c-3.228-6.933-6.574-13.387-9.442-18.527
C351.781,251.248,405.928,283.401,431.269,333.724L431.269,333.724z M202.725,302.526c10.758,5.26,27.492,16.018,25.222,27.612
c-1.674,8.367-6.455,13.626-11.953,19.842c-8.009,8.965-17.93,19.962-17.93,41.358c0,13.387-11.236,28.089-27.731,37.533
C159.814,385.242,170.81,337.788,202.725,302.526z M306.359,536.091c-59.287,0-109.969-37.055-130.289-89.171
c24.265-12.551,40.641-34.425,40.641-55.582c0-14.224,5.857-20.798,13.148-29.046c6.455-7.172,13.627-15.3,16.376-28.568
c3.944-19.723-11.834-34.903-29.285-44.824c16.137-13.387,35.262-23.309,56.18-28.448c2.988,5.379,7.649,13.985,12.072,23.309
c13.388,28.09,12.312,35.62,12.192,36.337c-0.479,2.032-4.542,7.292-7.291,10.877c-7.292,9.443-15.659,20.201-13.985,32.154
c0.837,6.216,4.184,11.475,9.921,15.897c10.279,7.77,31.197,5.021,42.434,9.324c3.347,1.315,3.347,2.151,3.347,3.108
c0,7.53-3.825,24.862-2.032,38.967c2.151,16.854,11.475,22.711,18.886,24.504c1.913,0.479,3.944,0.718,5.977,0.718
c17.571,0,37.533-18.527,62.276-57.614c9.442-14.822,17.69-29.883,23.547-41.238C466.889,446.203,399.473,536.091,306.359,536.091
z" />
<path fill="#51AAF8" d="M295.482,444.649c-12.432-4.304-30.003-5.618-39.565,0c-11.714,6.933-20.679,32.393-13.507,46.736
c5.14,10.28,19.723,13.148,31.078,13.148c6.933,0,15.061-1.075,20.918-3.944c18.527-9.323,24.384-28.329,19.364-41.357
C311.379,452.896,305.282,447.996,295.482,444.649L295.482,444.649z M286.157,483.975c-2.51,1.315-8.605,2.391-15.419,1.913
c-7.053-0.358-10.878-2.151-11.834-2.988c-0.837-1.913-0.956-6.455,0.837-12.073c1.793-5.856,4.542-9.563,5.618-10.279
c1.314-0.837,7.411-1.912,16.614-0.358c8.965,1.554,13.627,4.542,14.583,5.737C298.231,470.588,295.601,479.313,286.157,483.975
L286.157,483.975z" />
</g>
</svg>
</div>
</div>