SVGRenderer函数

Question

我没有使用SVG的经验。我试图通过SVGRenderer函数添加一个图标，但是我无法更改图标的一些属性。我能够通过path重新创建图标，但是我不能更改图标的height或width，我想让它变小。

我使用的是react-highcharts包装。这是函数调用：

Highcharts.SVGRenderer.prototype.symbols.stockTools = function() {
      var path = [
        "M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z"
      ];
      return path;
    };

这里是该函数的文档，这里是一个实时演示。

Answer 1

恐怕这样做是不可能的。

Highcharts.SVGRenderer.prototype.symbols这个函数返回一个路径。数组中的每一个值都意味着下一个位置，应该用真正的基本单词来绘制这条线。

查看这个示例，看看我在说什么：https://jsfiddle.net/BlackLabel/c38ofw5h/

对于['M', 0, 0 ]，它类似于{x: 0，y: 0}，所以开始点，下一个['L', 100, 100]，类似于{x: 100，y: 100}的绘制线。您粘贴了一个复杂的坐标数组来绘制它，具有“固定高度”。

这里解释得也很好：扩展高图表渲染器符号，使其具有加号

当然，SVG元素可以定制。但是作为一个HTML元素。这里解释得很好：https://css-tricks.com/scale-svg/

因此，根据上述信息，我认为更好的方法是将自定义标签创建为HTML元素。

演示：https://codesandbox.io/s/costume-icon-mfg7z

API：https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#label

API：https://api.highcharts.com/highstock/chart.events.render