Question

我已经搜索了几个小时，因为这个SVG在Firefox中不起作用。任何人都知道我是否遇到了已知错误或我的代码出现问题？

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

我特别询问该笔中的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

根据SVG specification，您的路径无效。特别是逗号只允许在数字之间，即...l16.505,16.504, c2.143,2.144,5.617...为error。

Answer 2

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

更新了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"

Firefox中的SVG渲染不完整

2 个答案:

更新了codepen