如何使用另一个 svg 自定义标记放置？答案

【问题标题】：how to customize the marker drop with another svg?如何使用另一个 svg 自定义标记放置？
【发布时间】：2019-06-07 14:49:25
【问题描述】：

您好，我正在使用 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";

【问题讨论】：

标签： svg marker wheelnav.js

【解决方案1】：

您必须在自定义 SVG 路径中使用 markerPathFunction 属性。（没有像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 属性。

【讨论】：

很高兴它有帮助！请考虑接受我的回答。