我正在处理svg + css动画，但是当使用svg的属性animatenmotion时遇到一些问题，会发生以下情况：在firefox中属性应用，遵循路径但是在直线上并且当我测试时与另一个图像不显示图像，该属性适用于跟随路径的铬，但当我更改图像时，不显示 SVG：
<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>
这里有一个演示http://jsfiddle.net/b8J6u/
我尝试了它也没有路径的css效果，我得到了相同的结果
我使用此示例https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animateMotion作为参考，它在firefox和chrome中运行良好...但我的代码不起作用。这是我的问题。我不知道这里发生了什么，我很遗憾，希望你能帮助我谢谢
修改
在ubuntu 12.04上测试fifefox 28.0并不起作用 在Windows上的fifefox xx上测试工作正常 我在ubuntu 12.04上看到的很多例子都很好用