how to customize the marker drop with another svg?

Question

Hello I'm using Raphael's wheelnav.js and would like to custom the Marker Drop path with another svg path ?

https://wheelnavjs.softwaretailoring.net/documentation/marker.html

I made a class css with a custom path link that works on chrome but not on firefox and safari.

example there --> https://infinistudio.ch/test/

Can we change the link of the path in javascript?

I tried this without success:

    wheel.markerFunction = markerPath().DropMarker;
    wheel.markerPath  = "imgsrc:mascot.svg";

Answer 1

You have to use the markerPathFunction property with your custom SVG path. (There is no such property like markerFunction and 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"
    };
};

In your case (it works with HTML tags), you have to use the data-wheelnav-init attribute also.