Html 旋转SVG圆时进行切边

我试图旋转一个SVG圆（实际上是一组三个120度的圆弧），遇到了圆弧边缘被切断的问题（至少在Firefox中是这样）

下面是静态旋转圆的渲染，以突出显示问题

---

我已经检查了弧的每一个父项，没有一个看起来要切断弧。我似乎无法确定是什么导致了这些割伤。。。我原以为可能是viewBox，但很遗憾，调整值无助于。。。过去我知道SVG有很多种形式，但我还不熟悉如何在HTML中使用SVG

你现在可能已经明白了，但万一有人遇到这个问题

该问题确实与viewBox有关，但也与该viewBox中的对象有关。基本上，您需要在viewBox中提供一些填充以允许旋转。因此，如果您的对象是400 x 400，而您的视口是400 x 400，则任何微小的差异都将被截断（即，在视口外），因此您应该允许一些填充。因此，您的对象将是400 x 400，并定位在中心，而您的viewBox可能是420 x 420

---

希望这是有道理的。

这里看起来不错。Chrome。在最新的FF上看起来不错。什么？这怎么可能？？？它是。。。ubuntuo\uuuo

\uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu

开罗渲染。。。是吗？Firefox对我来说有问题（26.0 Linux），我认为这是一个开罗错误。。。我会在bugzilla四处看看…谢谢你的回答。。。但我相信问题与viewbox中的填充无关。我第一件事就试过了，但还是不行。我相信它与渲染引擎和firefox有关……对我来说，它确实与Viewbox有关。我有一个圆，我想它略高于100像素，我的视图框是：

viewbox=“0 100 100”

，我的问题在更改为：

viewbox=“-2-2 104”

var circle;
var root = Snap('#arcs');

circle = root.select('.circle');

Snap.animate(0, 360, function(v) {
  return circle.transform("r" + v);
}, 2000);

circle = root.select('.circle');
circle.transform("r" + 40);