CODEWITHSUNDEEP
htmlsvgsnap.svg
kumarharsh
kumarharsh

Reputation: 19629

Edge cutting while rotating an SVG circle

I'm trying to rotate an SVG circle (a group of three 120deg arcs actually), and running into problems where the edges of the arcs are being cut off (at least in 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);

Here is a render of the static rotated circle to highlight the problem

http://jsfiddle.net/RedDevil/gvbtr2Ly/

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

An image to show the bug

I've inspected every parent of the arcs, and none of them seem to be cutting the arcs off. I can't seem to pinpoint what could be causing the cuts... I thought it could be the viewBox, but adjusting the values doesn't help sadly... I've known SVG in many forms over the past, but am new to using it with HTML...

Upvotes: 2

Views: 1498

Answers (1)

jtomm
jtomm

Reputation: 21

You've probably already figured it out by now, but just incase someone else comes across this issue...

The issue does relate to the viewBox, but also the objects within that viewBox. Basically you need to provide some padding within your viewBox to allow for the rotation. So, if your object is 400 x 400 and your viewBox is 400 x 400 any minor discrepancy will appear to be cut off (ie, out of the viewBox) therefore you should allow some padding. So your object would be 400 x 400 and positioned center and your viewBox could be 420 x 420.

Hopefully that makes sense.

Upvotes: 2

Related Questions