circular navigation with wheelnav.js - SVG does not rotate text
<p>I just started using wheelnav.js in order to build a navigation. </p>

<p>This is the <a href="http://wheelnavjs.softwaretailoring.net/documentation/spreader.html" rel="nofollow">Spreader</a> I would like to use (the 2nd example). Interestingly, just this one does not render as in the example. The Text does not rotate. </p>

<p>I just took the code example exactly as it is:</p>

<pre><code>wheel = new wheelnav('wheelDiv'); //stored in a var
wheel.spreaderInTitle = 'menu';
wheel.spreaderOutTitle = 'close';
wheel.spreaderTitleFont = '100 24px Helvetica';
wheel.spreaderInPercent = 0.8;
wheel.spreaderOutPercent = 1.1;
wheel.colors = ['#EDC951'];
wheel.spreaderEnable = true;
wheel.spreaderRadius = 85;
wheel.slicePathFunction = slicePath().DonutSlice;
wheel.clickModeRotate = false;
wheel.createWheel(['text', 'icon', 'percent', 'angle', null, null, null, null, null, null, null, null, null, null, null, null]);
</code></pre>

<p>I built a quick demo with both examples from the documentation site, the 1st looks ok the 2nd doesn't: <a href="https://jsfiddle.net/hoffs/8pdmj68L/3/" rel="nofollow">jsfiddle</a></p>

<p>EDIT: if I make it bigger e.g. 500px the spacing is better, but still the text is not rotated...</p>

<p>As far as I can see there are no further css rules (?) to apply.. Do I miss something - any ideas?</p>