Make polygon-selector follow mouse around in circle, Snap SVG
<p>I have a wheel where I put in elements for the user to choose. The idea is that the selector in the wheel should follow the mouse and "snap" to each element as the mouse is hovering.</p>

<p>I have created a circle of elements in Snap SVG, and it does as I want to - except when I go from 0 degrees to 337.5 degrees, then the selector moves all around the circle.
I want the selector to go -22.5 degrees, so it doesn't take the long way around.</p>

<p>Right now, I use this to animate the selector:</p>

<pre><code>p2.animate({
    transform: ['r'+ r, 400, 400]
}, 500, mina.easein, function() {});
</code></pre>

<p>Where <code>p2</code> is the selector and <code>r</code> is the rotation-degrees of the element the mouse is hovering.</p>

<p>I have created a <a href="https://jsfiddle.net/ju4qffj9/" rel="nofollow noreferrer">JSFiddle</a> with my full code.</p>

<p>The issue - as I see it - is that the rotation in Snap SVG isn't relative from the current position, but goes from 0 degrees every time.</p>

<p>Can anyone tell me - or help me get in the right direction of - the logic to make the selector follow the mouse around the circle, no matter which way the user decides to go?</p>