html - 旋转SVG圆时进行边缘切割

我试图旋转一个SVG圆（实际上是一组三个120度的圆弧），遇到了圆弧边缘被切断的问题（至少在Firefox中）
http://jsfiddle.net/RedDevil/u9u9rbbw/

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

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

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

下面是静态旋转圆的渲染，以突出显示问题
http://jsfiddle.net/RedDevil/gvbtr2Ly/

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

我已经检查过每一个弧的父弧，它们似乎都没有切断弧。我似乎无法确定是什么导致了削减。。。我以为它可能是viewBox，但调整这些值并没有帮助。。。过去我对SVG有很多了解，但对HTML使用SVG还不太熟悉。。。

最佳答案

你现在可能已经知道了，但万一有人碰到这个问题。。。
这个问题与viewBox有关，但也与viewBox中的对象有关。基本上，您需要在您的视图框中提供一些填充以允许旋转。因此，如果对象是400 x 400，而viewBox是400 x 400，则任何微小的差异都将被截断（即，从viewBox中删除），因此应该允许一些填充。所以你的物体是400 x 400，居中放置，你的视箱是420 x 420。
希望这是有意义的。

关于html - 旋转SVG圆时进行边缘切割，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25376023/