SVG Animatemotion 路径在 Firefox 中不起作用
SVG Animatemotion Path not working in firefox
好的，我有一个很大的 svg 文件，它是一张地图，现在已经创建了一个在地图上移动的小点。它在 Chrome 中运行良好，但在 Firefox 中不起作用。我曾尝试添加一个 begin="1s"，认为 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>
您的路径无效。根据 path grammar as written in the SVG specification 逗号只允许在数字之间使用，因此此处的第二个逗号 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 文件，它是一张地图，现在已经创建了一个在地图上移动的小点。它在 Chrome 中运行良好，但在 Firefox 中不起作用。我曾尝试添加一个 begin="1s"，认为 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>
您的路径无效。根据 path grammar as written in the SVG specification 逗号只允许在数字之间使用，因此此处的第二个逗号 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>