使用 wheelnav.js 的圆形导航 - SVG 不旋转文本答案

【问题标题】：circular navigation with wheelnav.js - SVG does not rotate text使用 wheelnav.js 的圆形导航 - SVG 不旋转文本
【发布时间】：2016-09-03 08:34:47
【问题描述】：

我刚刚开始使用 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 规则 (?) 可以应用。我错过了什么 - 任何想法吗？

【问题讨论】：

标签： javascript svg raphael wheelnav.js

【解决方案1】：

您必须使用titleRotateAngle 属性。

wheel.titleRotateAngle = 0;

【讨论】：

感谢您的建议，现在标题已按预期角度呈现。似乎我没有充分探索文档的所有部分。现在剩下的问题是，如果最初渲染它看起来不错，但是当单击吊具时，标题会以“奇怪的动画”消失。当再次单击以显示它们时，它们最初没有角度/旋转并在反弹效果停止后正确对齐。如果我发现原因，我会发布..
您使用的是 raphael 的 v2.2.0，但 wheelnav.js 可以与 v2.1.2 一起使用。这是一个修改后的工作JSFiddle
再次感谢 - 我替换了 raphael 文件，并没有考虑与新版本的兼容性^^