Функция 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 эта функция возвращает путь. Каждое из этих значений в массиве означает следующую позицию, в которой должна быть проведена линия, - в самом деле c слов.

Проверьте этот пример, чтобы увидеть, о чем я говорю: 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