Javascript 如何使用现有的SVG符号（在文件中）作为highcharts中的标记？

我想在我的图表中用作标记，但它们最好（1）用作CSS：

<i class="wi wi-night-sleet"></i>

我在文章中看到，可以使用多种方法来定制标记，但HTML/CSS没有

（在上面的演示中也提到）提到可以将SVG用于标记。天气图标还包括一个有没有办法使用它们？（我甚至不知道如何开始）

---

（1） 我所说的“最佳”是指“最容易编程处理”（与TTF/OTF相反）

我相当肯定Highcharts不支持SVG，支持SVG的方式与PNG不一样（即只提供URL）

Highcharts

渲染器

对象支持使用VML（矢量标记语言）的SVG路径数组，请参阅

我认为要实现您的目标，您需要打开天气图标SVG文件（手动或通过JavaScript），并将每个图标的路径复制到一个可以从函数调用返回的数组中

这提供了一个为Highcharts创建自定义plus图标的指南，进一步解释了我上面所描述的内容

如果查看SVG文件的原始内容，您会注意到一组节点，如下所示：

<glyph unicode="&#xf014;" horiz-adv-x="2641" d="M0 86q0 39 27 65t67 26h1991q40 0 65.5 -25.5t25.5 -65.5q0 -37 -26.5 -62t-64.5 -25h-1991q-40 0 -67 25t-27 62zM279 421q0 39 28 64q24 24 63 24h1992q37 0 62 -25.5t25 -62.5q0 -38 -25 -64.5t-62 -26.5h-1992q-38 0 -64.5 27t-26.5 64zM293 675q0 -14 16 -14h153 q10 0 21 17q38 83 113.5 136t165.5 60l59 8q18 0 18 19l7 53q17 173 146.5 288.5t303.5 115.5q173 0 301.5 -114t146.5 -286l8 -61q0 -18 21 -18h170q103 0 187.5 -55t125.5 -146q11 -17 22 -17h153q19 0 15 24q-47 164 -186 268t-317 104h-34q-53 213 -223.5 348.5 t-389.5 135.5q-224 0 -398 -140.5t-223 -358.5q-136 -32 -238.5 -129t-142.5 -232v4q-1 -3 -1 -10zM465 -241q0 38 28 63q24 24 64 24h1993q38 0 64.5 -25t26.5 -62q0 -38 -27 -65t-64 -27h-1993q-37 0 -64.5 27.5t-27.5 64.5z" />

unicode

属性描述正在绘制的图标，而

d

属性是必须拆分为数组的一长串路径

---

我将把SVG文件在JavaScript中的加载和解析留给您。我想使用jQuery或SVG特定的库是相当容易的。

因为使用SVG数据远不是显而易见的（@Quantastical answer显示路径），我最终直接格式化标签并去掉标记：

plotOptions: {
            series: {
                animation: false,
                marker: {
                    enabled: false
                },
                dataLabels: {
                    enabled: true,
                    verticalAlign: 'middle',
                    useHTML: true,
                    formatter: function () {
                        return  formatLabel(this);
                    }
                }
            }
        }

---

formatLabel

返回要显示的原始HTML。然后可以使用CSS进行定制。

谢谢。我终于设法让标签作为标记（根据我的回答）。