使用wheelnav.js进行循环导航 - SVG不会旋转文本

时间:2016-05-08 18:32:02

标签: javascript svg raphael wheelnav.js

我刚开始使用wheelnav.js来构建导航。

这是我想要使用的Spreader(第二个例子)。有趣的是,只是这个不像示例那样呈现。文本不旋转。

我刚刚完全按照原样使用了代码示例:

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]);

我使用文档站点中的两个示例构建了一个快速演示,第一个看起来没问题,第二个没有:jsfiddle

编辑:如果我把它做大,例如500px的间距更好,但文字仍未旋转......

据我所知,没有进一步的css规则(?)可以申请..我是否会错过任何想法?

1 个答案:

答案 0 :(得分:2)

您必须使用titleRotateAngle属性。

wheel.titleRotateAngle = 0;