svg动画运动+css麻烦

我正在制作svg+css动画，但在使用svg的AnimateMotion属性时遇到了一些问题，出现了以下情况：在firefox中，属性应用，沿着路径，但沿直线，当我使用另一个图像进行测试时，图像未显示，属性在chrome中很好地应用，沿着路径，但当我更改时，图像不会显示 svg：

这里有一个演示

我也尝试过，没有css效果的路径，我得到了同样的结果

我使用这个例子作为参考，它在firefox和chrome中运行良好。。。但是我的代码不起作用。这是我的问题。我不知道这里发生了什么我很失落，希望你能帮我谢谢

编辑

在Ubuntu12.04中对fifefox28.0的测试不起作用 在windows work fine中测试fifefox xx

---

我在Ubuntu12.04上看到的很多例子都很好

我想你可能需要更好地解释你的问题。在Chrome和Firefox中，您的演示对我来说都很好。问题是，圆圈从svg路径的开始移动到结束，但呈直线移动，不跟随仅在ff中出现的路径曲线，当我将圆更改为我的最终圆并应用属性运动动画时，图像不会显示在两个浏览器上。对我来说，它跟随ff中的曲线。对我来说也很好。每个人都在使用@bigbadabom的ff的哪个版本？这似乎是FF28严重相关的bug之一，在早期版本中不存在，希望在最新的开发人员版本中得到修复。我对动画运动和FF28也有问题：第一个运动不在路径附近，第二个是直线效果。@巴勃罗：你能重新写下你的问题来解释一下你所说的改变成一个完全不显示的图像是什么意思吗？您使用什么代码来定位和调整图像的大小？

<svg version="1.1"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="1200px" height="350px" viewBox="0 0 1200 350" enable-background="new 0 0 1200 350" xml:space="preserve">
<g id="main_marker">
<path id="marker" fill="#FFFFFF" d="M278.522,243.408c-6.832,0-12.37,5.537-12.37,12.369c0,0.146,0.004,0.296,0.011,0.445                                 c0.046,1.301,0.291,2.549,0.708,3.715c2.639,8.676,11.651,19.992,11.651,19.992s9.011-11.316,11.65-19.99c0.417-1.168,0.662-2.416,0.708-3.717c0.008-0.15,0.012-0.299,0.012-0.445C290.893,248.945,285.354,243.408,278.522,243.408z
M278.522,261.837c-3.346,0-6.059-2.713-6.059-6.06c0-3.346,2.713-6.059,6.059-6.059s6.059,2.713,6.059,6.059C284.581,259.124,281.869,261.837,278.522,261.837z"/>
<circle opacity="0.5" fill="#FFFFFF" enable-background="new    " cx="278.203" cy="277.689" r="13.311"/>
</g>

<g id="ruta_1">
<path fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" d="M278.522,279.93c0,0,141.779-119.375,393.378-47.402" id="ruta1"/>

<path id="marker"  fill="#FFFFFF" d="M672.646,207.563c-4.797,0-8.687,3.889-8.687,8.686c0,0.104,0.004,0.207,0.008,0.313                                  c0.033,0.912,0.205,1.789,0.498,2.608c1.854,6.092,8.181,14.036,8.181,14.036s6.326-7.944,8.18-14.035
c0.294-0.82,0.465-1.697,0.497-2.609c0.005-0.106,0.009-0.21,0.009-0.313C681.331,211.452,677.443,207.563,672.646,207.563z
M672.646,220.504c-2.35,0-4.255-1.905-4.255-4.255c0-2.349,1.905-4.254,4.255-4.254s4.254,1.905,4.254,4.254
 C676.899,218.599,674.995,220.504,672.646,220.504z"/>

<path id="plane" d="M292.583,254.946c0.3,0.518,0.24,0.958-0.27,1.809c-0.51,0.852-0.967,1.392-2.197,2.082
c-1.86,1.061-3.768,2.093-5.706,3.174c-0.066,4.648-0.131,9.296-0.227,13.995c-0.061,0.44-0.3,0.841-0.629,1.05
c-0.411,0.231-0.821,0.463-1.311,0.714c-0.599,0.319-1.189,0.169-1.51-0.431c-0.07-0.108-0.1-0.4-0.14-0.558
c-0.633-3.03-1.266-6.058-1.947-9.118c-0.321-0.599-0.693-1.228-1.033-1.908c-1.527,0.852-3.056,1.701-4.613,2.604
c-0.433,0.15-0.752,0.229-1.152,0.331c-0.319,0.081-0.689,0.13-1.06,0.181c0.082,0.999,0.211,2.029,0.312,3.108
c0.09,0.53-0.159,1.061-0.647,1.312c-0.112,0.068-0.301,0.159-0.489,0.249c-0.551,0.351-1.061,0.181-1.41-0.37
c-0.25-0.488-0.553-1.008-0.853-1.527c-0.39-0.71-0.781-1.418-1.192-2.208c-0.39-0.71-0.78-1.421-1.221-2.159
c-0.25-0.49-0.548-1.008-0.851-1.53c-0.32-0.598-0.152-1.107,0.448-1.429c0.111-0.07,0.25-0.19,0.44-0.28
c0.49-0.25,1.061-0.183,1.45,0.188c0.839,0.64,1.681,1.28,2.522,1.917c0.179-0.299,0.388-0.647,0.67-0.89
c0.279-0.239,0.557-0.479,0.917-0.739c1.529-0.851,3.057-1.703,4.588-2.555c-0.322-0.599-0.692-1.228-1.032-1.907
c-2.242-2.159-4.483-4.316-6.724-6.473c-0.101-0.06-0.32-0.262-0.441-0.4c-0.32-0.598-0.12-1.158,0.428-1.511
c0.411-0.229,0.819-0.461,1.31-0.709c0.38-0.181,0.849-0.173,1.229-0.012l12.054,7.219c1.859-1.062,3.767-2.094,5.706-3.175
c1.228-0.691,1.889-0.772,2.907-0.772C291.903,254.267,292.284,254.424,292.583,254.946">
<animateMotion dur="6s" repeatCount="indefinite">
<mpath xlink:href="#ruta1"/>
</animateMotion>
</path>
<circle cx="" cy="" r="13" fill="blue">

<!-- Define the motion path animation -->
<animateMotion dur="6s" repeatCount="indefinite">
<mpath xlink:href="#ruta1"/>
</animateMotion>
</circle>
</g>
</svg>