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

Here is documentation for that function and here 现场演示。

Answer 1

这样恐怕是实现不了了

Highcharts.SVGRenderer.prototype.symbols这个函数returns一个路径。数组中的每个值都表示应该绘制线条的下一个位置——用非常基本的词来说。

查看此示例以了解我在说什么：https://jsfiddle.net/BlackLabel/c38ofw5h/

对于 ['M', 0, 0 ] 就像 {x: 0, y: 0} ，所以开始点，接下来 ['L', 100, 100] 它就像画线到 {x: 100, y: 100}。你粘贴了一个复杂的坐标数组来绘制它，'fixed height'。

这里解释的也很好：Extend highcharts renderer symbols to have plus sign

当然，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

SVGRenderer 函数

SVGRenderer function

javascript

svg

highcharts

react-highcharts