您好,我正在使用Raphael的wheelnav.js,并想用另一个svg
路径自定义Marker Drop路径吗?
https://wheelnavjs.softwaretailoring.net/documentation/marker.html
我制作了一个具有自定义路径链接的css类,该链接可用于chrome,但不适用于Firefox和safari。
示例-> https://infinistudio.ch/test/
我们可以在javascript中更改路径的链接吗?
我尝试了这个但没有成功:
wheel.markerFunction = markerPath().DropMarker;
wheel.markerPath = "imgsrc:mascot.svg";
答案 0 :(得分:0)
您必须将markerPathFunction
属性与自定义SVG路径一起使用。 (没有markerFunction
和markerPath
这样的属性。)
window.onload = function () {
var wheel = new wheelnav("wheelDiv");
wheel.markerPathFunction = CustomMarker;
wheel.createWheel();
};
var CustomMarker = function (helper, percent, custom) {
return {
markerPathString: "m436 413.2c-4.9-2.8-6.7-6.6-5.8-12 0-0.5 0-1-0.1-1.4-0.7-21.9-1.5-43.9-2.2-66.2l26.8 1.6c-3.6-7.4-6.8-14.4-10.5-21.2-6.3-11.5-10.8-23.5-12.5-36.6-1.6-12.1-3.3-24.1-5-36.2l-2.1-0.3c-0.4 2.2-1.1 4.3-1.2 6.5-0.1 4.3 0.5 8.7 0 13-2.7 24.1-5.3 48.2-24.6 66.1-1.5 1.4-2.5 3.2-4 5.1l26.2 1.6-0.9 76.1c-8.6 3-10.5 10-9.4 18.7 0.9 7 5.6 10 11.5 12.1 0.6 0.2 1.1 0.5 1.6 0.8 4.1-0.1 8-0.7 11.5-2.2 0.5-0.4 1-0.8 1.4-1.1 0.1 0 0.2-0.1 0.2-0.1 0.4-0.8 0.9-1.7 1.4-2.4l0.3-0.3c0.8-3 1.2-6.2 1.8-9.3 1.2-4.9 0.1-9.7-4.4-12.3zm-19.9 15.5c-3.4-3.5-2.5-6.8 0.6-10.2-0.2 3.2-0.4 6.5-0.6 10.2zm3.4-5.6c-0.3-0.4 2.9-2.9 3.9-4 4.7 0.5 7.3 2.4 6.7 5.9-0.3 1.9-2.9 3.5-4.4 5.2-2.1-2.2-4.5-4.4-6.2-7.1zm4.8 12.1c3.8-2.9 7.8-5.8 12.5-9.3-1.4 8.9-6.2 11.9-12.5 9.3z"
};
};
就您而言(它与HTML标记一起使用),您还必须使用data-wheelnav-init属性。