SVG Animatemotion路径在Firefox中不起作用答案

【问题标题】：SVG Animatemotion Path not working in firefoxSVG Animatemotion路径在Firefox中不起作用
【发布时间】：2015-04-18 09:59:21
【问题描述】：

好的，所以我有这个大的 svg 文件，它是一张地图，现在已经创建了一个在地图上移动的小点。它在 Chrome 中运行良好，但在 Firefox 中无法运行。我尝试添加一个 begin="1s" 认为也许 Firefox 只是不知道什么时候开始但没有奏效。知道为什么吗？ Firefox 的动画路径有问题吗？

<circle cx="" cy="" r="5" fill="#1f6527"> <animateMotion path="M110,130, C150 150,150 40, 270 200  C280 210, 290 210, 510 190 C520 210, 600 150, 705 140 C720 160, 720 160, 710 250 C 710 280, 720 280, 710 320 C710 310, 710 310, 720 470 L765 500" dur="20s" repeatCount="indefinite" /> </circle>

【问题讨论】：

标签： firefox svg path

【解决方案1】：

您的路径无效。根据path grammar as written in the SVG specification，逗号只能在数字之间使用，因此此处的第二个逗号M110,130, C150 使路径从该点开始无效。

Firefox 遵循 SVG 规范，而 Chrome 则稍微宽松一些。

&lt;svg width="100%" height="100%"&gt;&lt;circle cx="20" cy="20" r="5" fill="#1f6527"&gt; &lt;animateMotion path="M110,130 C150 150,150 40, 270 200  C280 210, 290 210, 510 190 C520 210, 600 150, 705 140 C720 160, 720 160, 710 250 C 710 280, 720 280, 710 320 C710 310, 710 310, 720 470 L765 500" dur="20s" repeatCount="indefinite" /&gt; &lt;/circle&gt;&lt;/svg&gt;

【讨论】：