wheelnav.js 的圆形导航 - SVG 不旋转文本
circular navigation with wheelnav.js - SVG does not rotate text
我刚开始使用 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 规则 (?) 可以应用。我是否遗漏了什么 - 有什么想法吗?
您必须使用 titleRotateAngle 属性.
wheel.titleRotateAngle = 0;
我刚开始使用 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 规则 (?) 可以应用。我是否遗漏了什么 - 有什么想法吗?
您必须使用 titleRotateAngle 属性.
wheel.titleRotateAngle = 0;