Question

好的，所以我有一个大的svg文件，这是一个地图，现在创建了一个在地图上移动的小点。它在Chrome中运行得非常好，但在Firefox中不起作用。我试过添加一个开始=＆＃34; 1s＆＃34;想到也许Firefox只是不知道什么时候开始但是没有用。知道为什么吗？ Firefox是否存在animatemotion路径问题？

<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>

Answer 1

您的路径无效。根据{{3}}逗号，只允许在数字之间使用，因此此处的第二个逗号M110,130, C150会使该路径无效。

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

<svg width="100%" height="100%"><circle cx="20" cy="20" 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></svg>

SVG Animatemotion路径无法在Firefox中运行

1 个答案: