如何使用另一个 svg 自定义标记下降？

Question

您好，我正在使用 Raphael 的 wheelnav.js 并且想使用另一个 svg 路径自定义标记放置路径？

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

我制作了一个 class css，其中包含自定义路径 link，适用于 chrome，但不适用于 firefox 和 safari。

我们可以更改 javascript 中路径的 link 吗？

我试过了没有成功：

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

Answer 1

您必须将 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 属性。

如何使用另一个 svg 自定义标记下降？

how to customize the marker drop with another svg?

svg

marker

wheelnav.js