Firefox 中的 SVG 渲染不完整

Question

我已经搜索了几个小时，原因是这个 SVG 不能在 Firefox 中运行。任何人都知道我是否遇到了已知的错误或我的代码有问题？

http://codepen.io/ryanburnette/pen/c5274e0076748da1a53a2d16c8702050

我具体询问的是 Pen 中的 SVG。请注意，我的代码在 Slim 中。

svg.overlay viewbox="0 0 265 281.551" 
  g
    path.outer d="M132.5,0C59.322,0,0,59.322,0,132.5c0,66.245,48.616,121.134,112.115,130.939l16.505,16.504, c2.143,2.144,5.617,2.144,7.762-0.001l0.001,0.001l16.504-16.505C216.385,253.633,265,198.745,265,132.5,C265,59.322,205.678,0,132.5,0z"
    path.inner d="M132.502,256.388C64.08,256.388,8.614,200.921,8.614,132.5S64.08,8.612,132.502,8.612,c68.421,0,123.887,55.467,123.887,123.888S200.923,256.388,132.502,256.388z"

更新 1：

我在不应该有逗号的地方使用了逗号。有趣的是，Firefox 是唯一一个尽管出现错误但格式错误的 SVG 无法正常工作的浏览器。具体来说，在 Firefox 中，元素没有渲染到不应该出现的逗号所在的位置。

更新 2：

根据向我建议的验证，我尝试使用 W3C 标记验证服务验证我的 SVG 标记。虽然这确实检查了 XML 的完整性，但它不会发现这个特殊问题。

Answer 1

您在路径中添加了额外的逗号,。您需要删除它们。

更新codepen

path.outer d="M132.5,0 C59.322,0 0,59.322 0,132.5 c0,66.245 48.616,121.134 112.115,130.939 l16.505,16.504 c2.143,2.144 5.617,2.144 7.762-0.001 l0.001,0.001 l16.504-16.505C216.385,253.633 265,198.745 265,132.5 C265,59.322 205.678,0 132.5,0z"
path.inner d="M132.502,256.388C64.08 256.388,8.614 200.921,8.614 132.5S64.08,8.612 132.502,8.612 c68.421,0 123.887,55.467 123.887,123.888 S200.923,256.388 132.502,256.388z"

Answer 2

根据SVG specification，您的路径无效。具体来说，逗号只能在 介于 数字之间，即 ...l16.505,16.504, c2.143,2.144,5.617... 是 error。