html - 旋转 SVG 圆时切边

Question

我正在尝试旋转一个 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 一起使用...

Answer 1

你现在可能已经弄明白了，但以防其他人遇到这个问题......

该问题确实与 viewBox 相关，但也与该 viewBox 中的对象有关。基本上，您需要在 viewBox 中提供一些填充以允许旋转。所以，如果你的对象是 400 x 400 而你的 viewBox 是 400 x 400 任何微小的差异都会被切断(即，在 viewBox 之外)因此你应该允许一些填充。因此，您的对象将是 400 x 400 并位于中心，而您的 viewBox 可能是 420 x 420。

希望这是有道理的。