Как настроить маркер падение с другим SVG? - PullRequest
Новая
       38

Как настроить маркер падение с другим SVG?

0 голосов
/ 07 июня 2019

Здравствуйте, я использую Raphael's wheelnav.js и хотел бы настроить путь удаления маркера с помощью другого пути svg?

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";

1 Ответ

0 голосов
/ 12 июня 2019

Вы должны использовать свойство 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 .

...