ps-toolkit-ui 0.0.211 → 0.0.215

package/src/assets/plugins/highcharts/code/es-modules/Core/Renderer/SVG/SVGRenderer.js

@@ -1,1900 +0,0 @@
-/* *
- *
- *  (c) 2010-2021 Torstein Honsi
- *
- *  License: www.highcharts.com/license
- *
- *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
- *
- * */
-'use strict';
-import AST from '../HTML/AST.js';
-import Color from '../../Color/Color.js';
-import H from '../../Globals.js';
-var charts = H.charts, deg2rad = H.deg2rad, doc = H.doc, isFirefox = H.isFirefox, isMS = H.isMS, isWebKit = H.isWebKit, noop = H.noop, SVG_NS = H.SVG_NS, symbolSizes = H.symbolSizes, win = H.win;
-import RendererRegistry from '../RendererRegistry.js';
-import SVGElement from './SVGElement.js';
-import SVGLabel from './SVGLabel.js';
-import Symbols from './Symbols.js';
-import TextBuilder from './TextBuilder.js';
-import U from '../../Utilities.js';
-var addEvent = U.addEvent, attr = U.attr, createElement = U.createElement, css = U.css, defined = U.defined, destroyObjectProperties = U.destroyObjectProperties, extend = U.extend, isArray = U.isArray, isNumber = U.isNumber, isObject = U.isObject, isString = U.isString, merge = U.merge, pick = U.pick, pInt = U.pInt, uniqueKey = U.uniqueKey;
-/* *
- *
- *  Variables
- *
- * */
-var hasInternalReferenceBug;
-/* *
- *
- *  Class
- *
- * */
-/* eslint-disable no-invalid-this, valid-jsdoc */
-/**
- * Allows direct access to the Highcharts rendering layer in order to draw
- * primitive shapes like circles, rectangles, paths or text directly on a chart,
- * or independent from any chart. The SVGRenderer represents a wrapper object
- * for SVG in modern browsers. Through the VMLRenderer, part of the `oldie.js`
- * module, it also brings vector graphics to IE <= 8.
- *
- * An existing chart's renderer can be accessed through {@link Chart.renderer}.
- * The renderer can also be used completely decoupled from a chart.
- *
- * @sample highcharts/members/renderer-on-chart
- *         Annotating a chart programmatically.
- * @sample highcharts/members/renderer-basic
- *         Independent SVG drawing.
- *
- * @example
- * // Use directly without a chart object.
- * let renderer = new Highcharts.Renderer(parentNode, 600, 400);
- *
- * @class
- * @name Highcharts.SVGRenderer
- *
- * @param {Highcharts.HTMLDOMElement} container
- *        Where to put the SVG in the web page.
- *
- * @param {number} width
- *        The width of the SVG.
- *
- * @param {number} height
- *        The height of the SVG.
- *
- * @param {Highcharts.CSSObject} [style]
- *        The box style, if not in styleMode
- *
- * @param {boolean} [forExport=false]
- *        Whether the rendered content is intended for export.
- *
- * @param {boolean} [allowHTML=true]
- *        Whether the renderer is allowed to include HTML text, which will be
- *        projected on top of the SVG.
- *
- * @param {boolean} [styledMode=false]
- *        Whether the renderer belongs to a chart that is in styled mode.
- *        If it does, it will avoid setting presentational attributes in
- *        some cases, but not when set explicitly through `.attr` and `.css`
- *        etc.
- */
-var SVGRenderer = /** @class */ (function () {
-    /* *
-     *
-     *  Constructors
-     *
-     * */
-    function SVGRenderer(container, width, height, style, forExport, allowHTML, styledMode) {
-        /* *
-         *
-         *  Properties
-         *
-         * */
-        this.alignedObjects = void 0;
-        /**
-         * The root `svg` node of the renderer.
-         *
-         * @name Highcharts.SVGRenderer#box
-         * @type {Highcharts.SVGDOMElement}
-         */
-        this.box = void 0;
-        /**
-         * The wrapper for the root `svg` node of the renderer.
-         *
-         * @name Highcharts.SVGRenderer#boxWrapper
-         * @type {Highcharts.SVGElement}
-         */
-        this.boxWrapper = void 0;
-        this.cache = void 0;
-        this.cacheKeys = void 0;
-        this.chartIndex = void 0;
-        /**
-         * A pointer to the `defs` node of the root SVG.
-         *
-         * @name Highcharts.SVGRenderer#defs
-         * @type {Highcharts.SVGElement}
-         */
-        this.defs = void 0;
-        this.globalAnimation = void 0;
-        this.gradients = void 0;
-        this.height = void 0;
-        this.imgCount = void 0;
-        this.isSVG = void 0;
-        this.style = void 0;
-        /**
-         * Page url used for internal references.
-         *
-         * @private
-         * @name Highcharts.SVGRenderer#url
-         * @type {string}
-         */
-        this.url = void 0;
-        this.width = void 0;
-        this.init(container, width, height, style, forExport, allowHTML, styledMode);
-    }
-    /* *
-     *
-     *  Functions
-     *
-     * */
-    /**
-     * Initialize the SVGRenderer. Overridable initializer function that takes
-     * the same parameters as the constructor.
-     *
-     * @function Highcharts.SVGRenderer#init
-     *
-     * @param {Highcharts.HTMLDOMElement} container
-     * Where to put the SVG in the web page.
-     *
-     * @param {number} width
-     * The width of the SVG.
-     *
-     * @param {number} height
-     * The height of the SVG.
-     *
-     * @param {Highcharts.CSSObject} [style]
-     * The box style, if not in styleMode
-     *
-     * @param {boolean} [forExport=false]
-     * Whether the rendered content is intended for export.
-     *
-     * @param {boolean} [allowHTML=true]
-     * Whether the renderer is allowed to include HTML text, which will be
-     * projected on top of the SVG.
-     *
-     * @param {boolean} [styledMode=false]
-     * Whether the renderer belongs to a chart that is in styled mode. If it
-     * does, it will avoid setting presentational attributes in some cases, but
-     * not when set explicitly through `.attr` and `.css` etc.
-     */
-    SVGRenderer.prototype.init = function (container, width, height, style, forExport, allowHTML, styledMode) {
-        var renderer = this, boxWrapper = renderer
-            .createElement('svg')
-            .attr({
-            version: '1.1',
-            'class': 'highcharts-root'
-        }), element = boxWrapper.element;
-        if (!styledMode) {
-            boxWrapper.css(this.getStyle(style));
-        }
-        container.appendChild(element);
-        // Always use ltr on the container, otherwise text-anchor will be
-        // flipped and text appear outside labels, buttons, tooltip etc (#3482)
-        attr(container, 'dir', 'ltr');
-        // For browsers other than IE, add the namespace attribute (#1978)
-        if (container.innerHTML.indexOf('xmlns') === -1) {
-            attr(element, 'xmlns', this.SVG_NS);
-        }
-        // object properties
-        renderer.isSVG = true;
-        this.box = element;
-        this.boxWrapper = boxWrapper;
-        renderer.alignedObjects = [];
-        this.url = this.getReferenceURL();
-        // Add description
-        var desc = this.createElement('desc').add();
-        desc.element.appendChild(doc.createTextNode('Created with Highcharts 9.3.3'));
-        renderer.defs = this.createElement('defs').add();
-        renderer.allowHTML = allowHTML;
-        renderer.forExport = forExport;
-        renderer.styledMode = styledMode;
-        renderer.gradients = {}; // Object where gradient SvgElements are stored
-        renderer.cache = {}; // Cache for numerical bounding boxes
-        renderer.cacheKeys = [];
-        renderer.imgCount = 0;
-        renderer.setSize(width, height, false);
-        // Issue 110 workaround:
-        // In Firefox, if a div is positioned by percentage, its pixel position
-        // may land between pixels. The container itself doesn't display this,
-        // but an SVG element inside this container will be drawn at subpixel
-        // precision. In order to draw sharp lines, this must be compensated
-        // for. This doesn't seem to work inside iframes though (like in
-        // jsFiddle).
-        var subPixelFix, rect;
-        if (isFirefox && container.getBoundingClientRect) {
-            subPixelFix = function () {
-                css(container, { left: 0, top: 0 });
-                rect = container.getBoundingClientRect();
-                css(container, {
-                    left: (Math.ceil(rect.left) - rect.left) + 'px',
-                    top: (Math.ceil(rect.top) - rect.top) + 'px'
-                });
-            };
-            // run the fix now
-            subPixelFix();
-            // run it on resize
-            renderer.unSubPixelFix = addEvent(win, 'resize', subPixelFix);
-        }
-    };
-    /**
-     * General method for adding a definition to the SVG `defs` tag. Can be used
-     * for gradients, fills, filters etc. Styled mode only. A hook for adding
-     * general definitions to the SVG's defs tag. Definitions can be referenced
-     * from the CSS by its `id`. Read more in
-     * [gradients, shadows and patterns](https://www.highcharts.com/docs/chart-design-and-style/gradients-shadows-and-patterns).
-     * Styled mode only.
-     *
-     * @function Highcharts.SVGRenderer#definition
-     *
-     * @param {Highcharts.ASTNode} def
-     * A serialized form of an SVG definition, including children.
-     *
-     * @return {Highcharts.SVGElement}
-     * The inserted node.
-     */
-    SVGRenderer.prototype.definition = function (def) {
-        var ast = new AST([def]);
-        return ast.addToDOM(this.defs.element);
-    };
-    /**
-     * Get the prefix needed for internal URL references to work in certain
-     * cases. Some older browser versions had a bug where internal url
-     * references in SVG attributes, on the form `url(#some-id)`, would fail if
-     * a base tag was present in the page. There were also issues with
-     * `history.pushState` related to this prefix.
-     *
-     * Related issues: #24, #672, #1070, #5244.
-     *
-     * The affected browsers are:
-     * - Chrome <= 53 (May 2018)
-     * - Firefox <= 51 (January 2017)
-     * - Safari/Mac <= 12.1 (2018 or 2019)
-     * - Safari/iOS <= 13
-     *
-     * @todo Remove this hack when time has passed. All the affected browsers
-     * are evergreens, so it is increasingly unlikely that users are affected by
-     * the bug.
-     *
-     * @return {string}
-     * The prefix to use. An empty string for modern browsers.
-     */
-    SVGRenderer.prototype.getReferenceURL = function () {
-        if ((isFirefox || isWebKit) &&
-            doc.getElementsByTagName('base').length) {
-            // Detect if a clip path is taking effect by performing a hit test
-            // outside the clipped area. If the hit element is the rectangle
-            // that was supposed to be clipped, the bug is present. This only
-            // has to be performed once per page load, so we store the result
-            // locally in the module.
-            if (!defined(hasInternalReferenceBug)) {
-                var id = uniqueKey();
-                var ast = new AST([{
-                        tagName: 'svg',
-                        attributes: {
-                            width: 8,
-                            height: 8
-                        },
-                        children: [{
-                                tagName: 'defs',
-                                children: [{
-                                        tagName: 'clipPath',
-                                        attributes: {
-                                            id: id
-                                        },
-                                        children: [{
-                                                tagName: 'rect',
-                                                attributes: {
-                                                    width: 4,
-                                                    height: 4
-                                                }
-                                            }]
-                                    }]
-                            }, {
-                                tagName: 'rect',
-                                attributes: {
-                                    id: 'hitme',
-                                    width: 8,
-                                    height: 8,
-                                    'clip-path': "url(#" + id + ")",
-                                    fill: 'rgba(0,0,0,0.001)'
-                                }
-                            }]
-                    }]);
-                var svg = ast.addToDOM(doc.body);
-                css(svg, {
-                    position: 'fixed',
-                    top: 0,
-                    left: 0,
-                    zIndex: 9e5
-                });
-                var hitElement = doc.elementFromPoint(6, 6);
-                hasInternalReferenceBug = (hitElement && hitElement.id) === 'hitme';
-                doc.body.removeChild(svg);
-            }
-            if (hasInternalReferenceBug) {
-                return win.location.href
-                    .split('#')[0] // remove the hash
-                    .replace(/<[^>]*>/g, '') // wing cut HTML
-                    // escape parantheses and quotes
-                    .replace(/([\('\)])/g, '\\$1')
-                    // replace spaces (needed for Safari only)
-                    .replace(/ /g, '%20');
-            }
-        }
-        return '';
-    };
-    /**
-     * Get the global style setting for the renderer.
-     *
-     * @private
-     * @function Highcharts.SVGRenderer#getStyle
-     *
-     * @param {Highcharts.CSSObject} style
-     * Style settings.
-     *
-     * @return {Highcharts.CSSObject}
-     * The style settings mixed with defaults.
-     */
-    SVGRenderer.prototype.getStyle = function (style) {
-        this.style = extend({
-            fontFamily: '"Lucida Grande", "Lucida Sans Unicode", ' +
-                'Arial, Helvetica, sans-serif',
-            fontSize: '12px'
-        }, style);
-        return this.style;
-    };
-    /**
-     * Apply the global style on the renderer, mixed with the default styles.
-     *
-     * @function Highcharts.SVGRenderer#setStyle
-     *
-     * @param {Highcharts.CSSObject} style
-     * CSS to apply.
-     */
-    SVGRenderer.prototype.setStyle = function (style) {
-        this.boxWrapper.css(this.getStyle(style));
-    };
-    /**
-     * Detect whether the renderer is hidden. This happens when one of the
-     * parent elements has `display: none`. Used internally to detect when we
-     * needto render preliminarily in another div to get the text bounding boxes
-     * right.
-     *
-     * @function Highcharts.SVGRenderer#isHidden
-     *
-     * @return {boolean}
-     * True if it is hidden.
-     */
-    SVGRenderer.prototype.isHidden = function () {
-        return !this.boxWrapper.getBBox().width;
-    };
-    /**
-     * Destroys the renderer and its allocated members.
-     *
-     * @function Highcharts.SVGRenderer#destroy
-     *
-     * @return {null}
-     * Pass through value.
-     */
-    SVGRenderer.prototype.destroy = function () {
-        var renderer = this, rendererDefs = renderer.defs;
-        renderer.box = null;
-        renderer.boxWrapper = renderer.boxWrapper.destroy();
-        // Call destroy on all gradient elements
-        destroyObjectProperties(renderer.gradients || {});
-        renderer.gradients = null;
-        // Defs are null in VMLRenderer
-        // Otherwise, destroy them here.
-        if (rendererDefs) {
-            renderer.defs = rendererDefs.destroy();
-        }
-        // Remove sub pixel fix handler (#982)
-        if (renderer.unSubPixelFix) {
-            renderer.unSubPixelFix();
-        }
-        renderer.alignedObjects = null;
-        return null;
-    };
-    /**
-     * Create a wrapper for an SVG element. Serves as a factory for
-     * {@link SVGElement}, but this function is itself mostly called from
-     * primitive factories like {@link SVGRenderer#path}, {@link
-     * SVGRenderer#rect} or {@link SVGRenderer#text}.
-     *
-     * @function Highcharts.SVGRenderer#createElement
-     *
-     * @param {string} nodeName
-     * The node name, for example `rect`, `g` etc.
-     *
-     * @return {Highcharts.SVGElement}
-     * The generated SVGElement.
-     */
-    SVGRenderer.prototype.createElement = function (nodeName) {
-        var wrapper = new this.Element();
-        wrapper.init(this, nodeName);
-        return wrapper;
-    };
-    /**
-     * Get converted radial gradient attributes according to the radial
-     * reference. Used internally from the {@link SVGElement#colorGradient}
-     * function.
-     *
-     * @private
-     * @function Highcharts.SVGRenderer#getRadialAttr
-     */
-    SVGRenderer.prototype.getRadialAttr = function (radialReference, gradAttr) {
-        return {
-            cx: (radialReference[0] - radialReference[2] / 2) +
-                (gradAttr.cx || 0) * radialReference[2],
-            cy: (radialReference[1] - radialReference[2] / 2) +
-                (gradAttr.cy || 0) * radialReference[2],
-            r: (gradAttr.r || 0) * radialReference[2]
-        };
-    };
-    /**
-     * Parse a simple HTML string into SVG tspans. Called internally when text
-     * is set on an SVGElement. The function supports a subset of HTML tags, CSS
-     * text features like `width`, `text-overflow`, `white-space`, and also
-     * attributes like `href` and `style`.
-     *
-     * @private
-     * @function Highcharts.SVGRenderer#buildText
-     *
-     * @param {Highcharts.SVGElement} wrapper
-     * The parent SVGElement.
-     */
-    SVGRenderer.prototype.buildText = function (wrapper) {
-        new TextBuilder(wrapper).buildSVG();
-    };
-    /**
-     * Returns white for dark colors and black for bright colors.
-     *
-     * @function Highcharts.SVGRenderer#getContrast
-     *
-     * @param {Highcharts.ColorString} rgba
-     * The color to get the contrast for.
-     *
-     * @return {Highcharts.ColorString}
-     * The contrast color, either `#000000` or `#FFFFFF`.
-     */
-    SVGRenderer.prototype.getContrast = function (rgba) {
-        rgba = Color.parse(rgba).rgba;
-        // The threshold may be discussed. Here's a proposal for adding
-        // different weight to the color channels (#6216)
-        rgba[0] *= 1; // red
-        rgba[1] *= 1.2; // green
-        rgba[2] *= 0.5; // blue
-        return rgba[0] + rgba[1] + rgba[2] >
-            1.8 * 255 ?
-            '#000000' :
-            '#FFFFFF';
-    };
-    /**
-     * Create a button with preset states.
-     *
-     * @function Highcharts.SVGRenderer#button
-     *
-     * @param {string} text
-     * The text or HTML to draw.
-     *
-     * @param {number} x
-     * The x position of the button's left side.
-     *
-     * @param {number} y
-     * The y position of the button's top side.
-     *
-     * @param {Highcharts.EventCallbackFunction<Highcharts.SVGElement>} callback
-     * The function to execute on button click or touch.
-     *
-     * @param {Highcharts.SVGAttributes} [theme]
-     * SVG attributes for the normal state.
-     *
-     * @param {Highcharts.SVGAttributes} [hoverState]
-     * SVG attributes for the hover state.
-     *
-     * @param {Highcharts.SVGAttributes} [pressedState]
-     * SVG attributes for the pressed state.
-     *
-     * @param {Highcharts.SVGAttributes} [disabledState]
-     * SVG attributes for the disabled state.
-     *
-     * @param {Highcharts.SymbolKeyValue} [shape=rect]
-     * The shape type.
-     *
-     * @param {boolean} [useHTML=false]
-     * Wether to use HTML to render the label.
-     *
-     * @return {Highcharts.SVGElement}
-     * The button element.
-     */
-    SVGRenderer.prototype.button = function (text, x, y, callback, theme, hoverState, pressedState, disabledState, shape, useHTML) {
-        var label = this.label(text, x, y, shape, void 0, void 0, useHTML, void 0, 'button'), styledMode = this.styledMode;
-        var curState = 0, 
-        // Make a copy of normalState (#13798)
-        // (reference to options.rangeSelector.buttonTheme)
-        normalState = theme ? merge(theme) : {};
-        var userNormalStyle = normalState && normalState.style || {};
-        // Remove stylable attributes
-        normalState = AST.filterUserAttributes(normalState);
-        // Default, non-stylable attributes
-        label.attr(merge({ padding: 8, r: 2 }, normalState));
-        // Presentational
-        var normalStyle, hoverStyle, pressedStyle, disabledStyle;
-        if (!styledMode) {
-            // Normal state - prepare the attributes
-            normalState = merge({
-                fill: "#f7f7f7" /* neutralColor3 */,
-                stroke: "#cccccc" /* neutralColor20 */,
-                'stroke-width': 1,
-                style: {
-                    color: "#333333" /* neutralColor80 */,
-                    cursor: 'pointer',
-                    fontWeight: 'normal'
-                }
-            }, {
-                style: userNormalStyle
-            }, normalState);
-            normalStyle = normalState.style;
-            delete normalState.style;
-            // Hover state
-            hoverState = merge(normalState, {
-                fill: "#e6e6e6" /* neutralColor10 */
-            }, AST.filterUserAttributes(hoverState || {}));
-            hoverStyle = hoverState.style;
-            delete hoverState.style;
-            // Pressed state
-            pressedState = merge(normalState, {
-                fill: "#e6ebf5" /* highlightColor10 */,
-                style: {
-                    color: "#000000" /* neutralColor100 */,
-                    fontWeight: 'bold'
-                }
-            }, AST.filterUserAttributes(pressedState || {}));
-            pressedStyle = pressedState.style;
-            delete pressedState.style;
-            // Disabled state
-            disabledState = merge(normalState, {
-                style: {
-                    color: "#cccccc" /* neutralColor20 */
-                }
-            }, AST.filterUserAttributes(disabledState || {}));
-            disabledStyle = disabledState.style;
-            delete disabledState.style;
-        }
-        // Add the events. IE9 and IE10 need mouseover and mouseout to funciton
-        // (#667).
-        addEvent(label.element, isMS ? 'mouseover' : 'mouseenter', function () {
-            if (curState !== 3) {
-                label.setState(1);
-            }
-        });
-        addEvent(label.element, isMS ? 'mouseout' : 'mouseleave', function () {
-            if (curState !== 3) {
-                label.setState(curState);
-            }
-        });
-        label.setState = function (state) {
-            // Hover state is temporary, don't record it
-            if (state !== 1) {
-                label.state = curState = state;
-            }
-            // Update visuals
-            label
-                .removeClass(/highcharts-button-(normal|hover|pressed|disabled)/)
-                .addClass('highcharts-button-' +
-                ['normal', 'hover', 'pressed', 'disabled'][state || 0]);
-            if (!styledMode) {
-                label
-                    .attr([
-                    normalState,
-                    hoverState,
-                    pressedState,
-                    disabledState
-                ][state || 0])
-                    .css([
-                    normalStyle,
-                    hoverStyle,
-                    pressedStyle,
-                    disabledStyle
-                ][state || 0]);
-            }
-        };
-        // Presentational attributes
-        if (!styledMode) {
-            label
-                .attr(normalState)
-                .css(extend({ cursor: 'default' }, normalStyle));
-        }
-        return label
-            .on('touchstart', function (e) { return e.stopPropagation(); })
-            .on('click', function (e) {
-            if (curState !== 3) {
-                callback.call(label, e);
-            }
-        });
-    };
-    /**
-     * Make a straight line crisper by not spilling out to neighbour pixels.
-     *
-     * @function Highcharts.SVGRenderer#crispLine
-     *
-     * @param {Highcharts.SVGPathArray} points
-     *        The original points on the format `[['M', 0, 0], ['L', 100, 0]]`.
-     *
-     * @param {number} width
-     *        The width of the line.
-     *
-     * @param {string} [roundingFunction=round]
-     *        The rounding function name on the `Math` object, can be one of
-     *        `round`, `floor` or `ceil`.
-     *
-     * @return {Highcharts.SVGPathArray}
-     *         The original points array, but modified to render crisply.
-     */
-    SVGRenderer.prototype.crispLine = function (points, width, roundingFunction) {
-        if (roundingFunction === void 0) { roundingFunction = 'round'; }
-        var start = points[0];
-        var end = points[1];
-        // Normalize to a crisp line
-        if (defined(start[1]) && start[1] === end[1]) {
-            // Substract due to #1129. Now bottom and left axis gridlines behave
-            // the same.
-            start[1] = end[1] =
-                Math[roundingFunction](start[1]) - (width % 2 / 2);
-        }
-        if (defined(start[2]) && start[2] === end[2]) {
-            start[2] = end[2] =
-                Math[roundingFunction](start[2]) + (width % 2 / 2);
-        }
-        return points;
-    };
-    /**
-     * Draw a path, wraps the SVG `path` element.
-     *
-     * @sample highcharts/members/renderer-path-on-chart/
-     *         Draw a path in a chart
-     * @sample highcharts/members/renderer-path/
-     *         Draw a path independent from a chart
-     *
-     * @example
-     * let path = renderer.path(['M', 10, 10, 'L', 30, 30, 'z'])
-     *     .attr({ stroke: '#ff00ff' })
-     *     .add();
-     *
-     * @function Highcharts.SVGRenderer#path
-     *
-     * @param {Highcharts.SVGPathArray} [path]
-     * An SVG path definition in array form.
-     *
-     * @return {Highcharts.SVGElement}
-     * The generated wrapper element.
-     *
-     */ /**
-    * Draw a path, wraps the SVG `path` element.
-    *
-    * @function Highcharts.SVGRenderer#path
-    *
-    * @param {Highcharts.SVGAttributes} [attribs]
-    * The initial attributes.
-    *
-    * @return {Highcharts.SVGElement}
-    * The generated wrapper element.
-    */
-    SVGRenderer.prototype.path = function (path) {
-        var attribs = (this.styledMode ? {} : {
-            fill: 'none'
-        });
-        if (isArray(path)) {
-            attribs.d = path;
-        }
-        else if (isObject(path)) { // attributes
-            extend(attribs, path);
-        }
-        return this.createElement('path').attr(attribs);
-    };
-    /**
-     * Draw a circle, wraps the SVG `circle` element.
-     *
-     * @sample highcharts/members/renderer-circle/
-     *         Drawing a circle
-     *
-     * @function Highcharts.SVGRenderer#circle
-     *
-     * @param {number} [x]
-     * The center x position.
-     *
-     * @param {number} [y]
-     * The center y position.
-     *
-     * @param {number} [r]
-     * The radius.
-     *
-     * @return {Highcharts.SVGElement}
-     * The generated wrapper element.
-     */ /**
-    * Draw a circle, wraps the SVG `circle` element.
-    *
-    * @function Highcharts.SVGRenderer#circle
-    *
-    * @param {Highcharts.SVGAttributes} [attribs]
-    * The initial attributes.
-    *
-    * @return {Highcharts.SVGElement}
-    * The generated wrapper element.
-    */
-    SVGRenderer.prototype.circle = function (x, y, r) {
-        var attribs = (isObject(x) ?
-            x :
-            typeof x === 'undefined' ? {} : { x: x, y: y, r: r }), wrapper = this.createElement('circle');
-        // Setting x or y translates to cx and cy
-        wrapper.xSetter = wrapper.ySetter = function (value, key, element) {
-            element.setAttribute('c' + key, value);
-        };
-        return wrapper.attr(attribs);
-    };
-    /**
-     * Draw and return an arc.
-     *
-     * @sample highcharts/members/renderer-arc/
-     *         Drawing an arc
-     *
-     * @function Highcharts.SVGRenderer#arc
-     *
-     * @param {number} [x=0]
-     * Center X position.
-     *
-     * @param {number} [y=0]
-     * Center Y position.
-     *
-     * @param {number} [r=0]
-     * The outer radius' of the arc.
-     *
-     * @param {number} [innerR=0]
-     * Inner radius like used in donut charts.
-     *
-     * @param {number} [start=0]
-     * The starting angle of the arc in radians, where 0 is to the right and
-     * `-Math.PI/2` is up.
-     *
-     * @param {number} [end=0]
-     * The ending angle of the arc in radians, where 0 is to the right and
-     * `-Math.PI/2` is up.
-     *
-     * @return {Highcharts.SVGElement}
-     * The generated wrapper element.
-     */ /**
-    * Draw and return an arc. Overloaded function that takes arguments object.
-    *
-    * @function Highcharts.SVGRenderer#arc
-    *
-    * @param {Highcharts.SVGAttributes} attribs
-    * Initial SVG attributes.
-    *
-    * @return {Highcharts.SVGElement}
-    * The generated wrapper element.
-    */
-    SVGRenderer.prototype.arc = function (x, y, r, innerR, start, end) {
-        var options;
-        if (isObject(x)) {
-            options = x;
-            y = options.y;
-            r = options.r;
-            innerR = options.innerR;
-            start = options.start;
-            end = options.end;
-            x = options.x;
-        }
-        else {
-            options = { innerR: innerR, start: start, end: end };
-        }
-        // Arcs are defined as symbols for the ability to set
-        // attributes in attr and animate
-        var arc = this.symbol('arc', x, y, r, r, options);
-        arc.r = r; // #959
-        return arc;
-    };
-    /**
-     * Draw and return a rectangle.
-     *
-     * @function Highcharts.SVGRenderer#rect
-     *
-     * @param {number} [x]
-     * Left position.
-     *
-     * @param {number} [y]
-     * Top position.
-     *
-     * @param {number} [width]
-     * Width of the rectangle.
-     *
-     * @param {number} [height]
-     * Height of the rectangle.
-     *
-     * @param {number} [r]
-     * Border corner radius.
-     *
-     * @param {number} [strokeWidth]
-     * A stroke width can be supplied to allow crisp drawing.
-     *
-     * @return {Highcharts.SVGElement}
-     * The generated wrapper element.
-     */ /**
-    * Draw and return a rectangle.
-    *
-    * @sample highcharts/members/renderer-rect-on-chart/
-    *         Draw a rectangle in a chart
-    * @sample highcharts/members/renderer-rect/
-    *         Draw a rectangle independent from a chart
-    *
-    * @function Highcharts.SVGRenderer#rect
-    *
-    * @param {Highcharts.SVGAttributes} [attributes]
-    * General SVG attributes for the rectangle.
-    *
-    * @return {Highcharts.SVGElement}
-    * The generated wrapper element.
-    */
-    SVGRenderer.prototype.rect = function (x, y, width, height, r, strokeWidth) {
-        r = isObject(x) ? x.r : r;
-        var wrapper = this.createElement('rect');
-        var attribs = (isObject(x) ?
-            x :
-            typeof x === 'undefined' ?
-                {} :
-                {
-                    x: x,
-                    y: y,
-                    width: Math.max(width, 0),
-                    height: Math.max(height, 0)
-                });
-        if (!this.styledMode) {
-            if (typeof strokeWidth !== 'undefined') {
-                attribs['stroke-width'] = strokeWidth;
-                attribs = wrapper.crisp(attribs);
-            }
-            attribs.fill = 'none';
-        }
-        if (r) {
-            attribs.r = r;
-        }
-        wrapper.rSetter = function (value, _key, element) {
-            wrapper.r = value;
-            attr(element, {
-                rx: value,
-                ry: value
-            });
-        };
-        wrapper.rGetter = function () {
-            return wrapper.r || 0;
-        };
-        return wrapper.attr(attribs);
-    };
-    /**
-     * Resize the {@link SVGRenderer#box} and re-align all aligned child
-     * elements.
-     *
-     * @sample highcharts/members/renderer-g/
-     *         Show and hide grouped objects
-     *
-     * @function Highcharts.SVGRenderer#setSize
-     *
-     * @param {number} width
-     * The new pixel width.
-     *
-     * @param {number} height
-     * The new pixel height.
-     *
-     * @param {boolean|Partial<Highcharts.AnimationOptionsObject>} [animate=true]
-     * Whether and how to animate.
-     */
-    SVGRenderer.prototype.setSize = function (width, height, animate) {
-        var renderer = this;
-        renderer.width = width;
-        renderer.height = height;
-        renderer.boxWrapper.animate({
-            width: width,
-            height: height
-        }, {
-            step: function () {
-                this.attr({
-                    viewBox: '0 0 ' + this.attr('width') + ' ' +
-                        this.attr('height')
-                });
-            },
-            duration: pick(animate, true) ? void 0 : 0
-        });
-        renderer.alignElements();
-    };
-    /**
-     * Create and return an svg group element. Child
-     * {@link Highcharts.SVGElement} objects are added to the group by using the
-     * group as the first parameter in {@link Highcharts.SVGElement#add|add()}.
-     *
-     * @function Highcharts.SVGRenderer#g
-     *
-     * @param {string} [name]
-     *        The group will be given a class name of `highcharts-{name}`. This
-     *        can be used for styling and scripting.
-     *
-     * @return {Highcharts.SVGElement}
-     *         The generated wrapper element.
-     */
-    SVGRenderer.prototype.g = function (name) {
-        var elem = this.createElement('g');
-        return name ?
-            elem.attr({ 'class': 'highcharts-' + name }) :
-            elem;
-    };
-    /**
-     * Display an image.
-     *
-     * @sample highcharts/members/renderer-image-on-chart/
-     *         Add an image in a chart
-     * @sample highcharts/members/renderer-image/
-     *         Add an image independent of a chart
-     *
-     * @function Highcharts.SVGRenderer#image
-     *
-     * @param {string} src
-     *        The image source.
-     *
-     * @param {number} [x]
-     *        The X position.
-     *
-     * @param {number} [y]
-     *        The Y position.
-     *
-     * @param {number} [width]
-     *        The image width. If omitted, it defaults to the image file width.
-     *
-     * @param {number} [height]
-     *        The image height. If omitted it defaults to the image file
-     *        height.
-     *
-     * @param {Function} [onload]
-     *        Event handler for image load.
-     *
-     * @return {Highcharts.SVGElement}
-     *         The generated wrapper element.
-     */
-    SVGRenderer.prototype.image = function (src, x, y, width, height, onload) {
-        var attribs = { preserveAspectRatio: 'none' }, setSVGImageSource = function (el, src) {
-            // Set the href in the xlink namespace
-            if (el.setAttributeNS) {
-                el.setAttributeNS('http://www.w3.org/1999/xlink', 'href', src);
-            }
-            else {
-                // could be exporting in IE
-                // using href throws "not supported" in ie7 and under,
-                // requries regex shim to fix later
-                el.setAttribute('hc-svg-href', src);
-            }
-        };
-        // Optional properties (#11756)
-        if (isNumber(x)) {
-            attribs.x = x;
-        }
-        if (isNumber(y)) {
-            attribs.y = y;
-        }
-        if (isNumber(width)) {
-            attribs.width = width;
-        }
-        if (isNumber(height)) {
-            attribs.height = height;
-        }
-        var elemWrapper = this.createElement('image').attr(attribs), onDummyLoad = function (e) {
-            setSVGImageSource(elemWrapper.element, src);
-            onload.call(elemWrapper, e);
-        };
-        // Add load event if supplied
-        if (onload) {
-            // We have to use a dummy HTML image since IE support for SVG image
-            // load events is very buggy. First set a transparent src, wait for
-            // dummy to load, and then add the real src to the SVG image.
-            setSVGImageSource(elemWrapper.element, 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' /* eslint-disable-line */);
-            var dummy = new win.Image();
-            addEvent(dummy, 'load', onDummyLoad);
-            dummy.src = src;
-            if (dummy.complete) {
-                onDummyLoad({});
-            }
-        }
-        else {
-            setSVGImageSource(elemWrapper.element, src);
-        }
-        return elemWrapper;
-    };
-    /**
-     * Draw a symbol out of pre-defined shape paths from
-     * {@link SVGRenderer#symbols}.
-     * It is used in Highcharts for point makers, which cake a `symbol` option,
-     * and label and button backgrounds like in the tooltip and stock flags.
-     *
-     * @function Highcharts.SVGRenderer#symbol
-     *
-     * @param {string} symbol
-     * The symbol name.
-     *
-     * @param {number} [x]
-     * The X coordinate for the top left position.
-     *
-     * @param {number} [y]
-     * The Y coordinate for the top left position.
-     *
-     * @param {number} [width]
-     * The pixel width.
-     *
-     * @param {number} [height]
-     * The pixel height.
-     *
-     * @param {Highcharts.SymbolOptionsObject} [options]
-     * Additional options, depending on the actual symbol drawn.
-     *
-     * @return {Highcharts.SVGElement}
-     * SVG symbol.
-     */
-    SVGRenderer.prototype.symbol = function (symbol, x, y, width, height, options) {
-        var ren = this, imageRegex = /^url\((.*?)\)$/, isImage = imageRegex.test(symbol), sym = (!isImage && (this.symbols[symbol] ? symbol : 'circle')), 
-        // get the symbol definition function
-        symbolFn = (sym && this.symbols[sym]);
-        var obj, path, imageSrc, centerImage;
-        if (symbolFn) {
-            // Check if there's a path defined for this symbol
-            if (typeof x === 'number') {
-                path = symbolFn.call(this.symbols, Math.round(x || 0), Math.round(y || 0), width || 0, height || 0, options);
-            }
-            obj = this.path(path);
-            if (!ren.styledMode) {
-                obj.attr('fill', 'none');
-            }
-            // expando properties for use in animate and attr
-            extend(obj, {
-                symbolName: (sym || void 0),
-                x: x,
-                y: y,
-                width: width,
-                height: height
-            });
-            if (options) {
-                extend(obj, options);
-            }
-            // Image symbols
-        }
-        else if (isImage) {
-            imageSrc = symbol.match(imageRegex)[1];
-            // Create the image synchronously, add attribs async
-            var img_1 = obj = this.image(imageSrc);
-            // The image width is not always the same as the symbol width. The
-            // image may be centered within the symbol, as is the case when
-            // image shapes are used as label backgrounds, for example in flags.
-            img_1.imgwidth = pick(symbolSizes[imageSrc] && symbolSizes[imageSrc].width, options && options.width);
-            img_1.imgheight = pick(symbolSizes[imageSrc] && symbolSizes[imageSrc].height, options && options.height);
-            /**
-             * Set the size and position
-             */
-            centerImage = function (obj) { return obj.attr({
-                width: obj.width,
-                height: obj.height
-            }); };
-            /**
-             * Width and height setters that take both the image's physical size
-             * and the label size into consideration, and translates the image
-             * to center within the label.
-             */
-            ['width', 'height'].forEach(function (key) {
-                img_1[key + 'Setter'] = function (value, key) {
-                    var imgSize = this['img' + key];
-                    this[key] = value;
-                    if (defined(imgSize)) {
-                        // Scale and center the image within its container.
-                        // The name `backgroundSize` is taken from the CSS spec,
-                        // but the value `within` is made up. Other possible
-                        // values in the spec, `cover` and `contain`, can be
-                        // implemented if needed.
-                        if (options &&
-                            options.backgroundSize === 'within' &&
-                            this.width &&
-                            this.height) {
-                            imgSize = Math.round(imgSize * Math.min(this.width / this.imgwidth, this.height / this.imgheight));
-                        }
-                        if (this.element) {
-                            this.element.setAttribute(key, imgSize);
-                        }
-                        if (!this.alignByTranslate) {
-                            var translate = ((this[key] || 0) - imgSize) / 2;
-                            var attribs = key === 'width' ?
-                                { translateX: translate } :
-                                { translateY: translate };
-                            this.attr(attribs);
-                        }
-                    }
-                };
-            });
-            if (defined(x)) {
-                img_1.attr({
-                    x: x,
-                    y: y
-                });
-            }
-            img_1.isImg = true;
-            if (defined(img_1.imgwidth) && defined(img_1.imgheight)) {
-                centerImage(img_1);
-            }
-            else {
-                // Initialize image to be 0 size so export will still function
-                // if there's no cached sizes.
-                img_1.attr({ width: 0, height: 0 });
-                // Create a dummy JavaScript image to get the width and height.
-                createElement('img', {
-                    onload: function () {
-                        var chart = charts[ren.chartIndex];
-                        // Special case for SVGs on IE11, the width is not
-                        // accessible until the image is part of the DOM
-                        // (#2854).
-                        if (this.width === 0) {
-                            css(this, {
-                                position: 'absolute',
-                                top: '-999em'
-                            });
-                            doc.body.appendChild(this);
-                        }
-                        // Center the image
-                        symbolSizes[imageSrc] = {
-                            width: this.width,
-                            height: this.height
-                        };
-                        img_1.imgwidth = this.width;
-                        img_1.imgheight = this.height;
-                        if (img_1.element) {
-                            centerImage(img_1);
-                        }
-                        // Clean up after #2854 workaround.
-                        if (this.parentNode) {
-                            this.parentNode.removeChild(this);
-                        }
-                        // Fire the load event when all external images are
-                        // loaded
-                        ren.imgCount--;
-                        if (!ren.imgCount && chart && !chart.hasLoaded) {
-                            chart.onload();
-                        }
-                    },
-                    src: imageSrc
-                });
-                this.imgCount++;
-            }
-        }
-        return obj;
-    };
-    /**
-     * Define a clipping rectangle. The clipping rectangle is later applied
-     * to {@link SVGElement} objects through the {@link SVGElement#clip}
-     * function.
-     *
-     * @example
-     * let circle = renderer.circle(100, 100, 100)
-     *     .attr({ fill: 'red' })
-     *     .add();
-     * let clipRect = renderer.clipRect(100, 100, 100, 100);
-     *
-     * // Leave only the lower right quarter visible
-     * circle.clip(clipRect);
-     *
-     * @function Highcharts.SVGRenderer#clipRect
-     *
-     * @param {number} [x]
-     *
-     * @param {number} [y]
-     *
-     * @param {number} [width]
-     *
-     * @param {number} [height]
-     *
-     * @return {Highcharts.ClipRectElement}
-     *         A clipping rectangle.
-     */
-    SVGRenderer.prototype.clipRect = function (x, y, width, height) {
-        var 
-        // Add a hyphen at the end to avoid confusion in testing indexes
-        // -1 and -10, -11 etc (#6550)
-        id = uniqueKey() + '-', clipPath = this.createElement('clipPath').attr({
-            id: id
-        }).add(this.defs), wrapper = this.rect(x, y, width, height, 0).add(clipPath);
-        wrapper.id = id;
-        wrapper.clipPath = clipPath;
-        wrapper.count = 0;
-        return wrapper;
-    };
-    /**
-     * Draw text. The text can contain a subset of HTML, like spans and anchors
-     * and some basic text styling of these. For more advanced features like
-     * border and background, use {@link Highcharts.SVGRenderer#label} instead.
-     * To update the text after render, run `text.attr({ text: 'New text' })`.
-     *
-     * @sample highcharts/members/renderer-text-on-chart/
-     *         Annotate the chart freely
-     * @sample highcharts/members/renderer-on-chart/
-     *         Annotate with a border and in response to the data
-     * @sample highcharts/members/renderer-text/
-     *         Formatted text
-     *
-     * @function Highcharts.SVGRenderer#text
-     *
-     * @param {string} [str]
-     * The text of (subset) HTML to draw.
-     *
-     * @param {number} [x]
-     * The x position of the text's lower left corner.
-     *
-     * @param {number} [y]
-     * The y position of the text's lower left corner.
-     *
-     * @param {boolean} [useHTML=false]
-     * Use HTML to render the text.
-     *
-     * @return {Highcharts.SVGElement}
-     * The text object.
-     */
-    SVGRenderer.prototype.text = function (str, x, y, useHTML) {
-        var renderer = this, attribs = {};
-        if (useHTML && (renderer.allowHTML || !renderer.forExport)) {
-            return renderer.html(str, x, y);
-        }
-        attribs.x = Math.round(x || 0); // X always needed for line-wrap logic
-        if (y) {
-            attribs.y = Math.round(y);
-        }
-        if (defined(str)) {
-            attribs.text = str;
-        }
-        var wrapper = renderer.createElement('text').attr(attribs);
-        if (!useHTML || (renderer.forExport && !renderer.allowHTML)) {
-            wrapper.xSetter = function (value, key, element) {
-                var tspans = element.getElementsByTagName('tspan'), parentVal = element.getAttribute(key);
-                for (var i = 0, tspan = void 0; i < tspans.length; i++) {
-                    tspan = tspans[i];
-                    // If the x values are equal, the tspan represents a line
-                    // break
-                    if (tspan.getAttribute(key) === parentVal) {
-                        tspan.setAttribute(key, value);
-                    }
-                }
-                element.setAttribute(key, value);
-            };
-        }
-        return wrapper;
-    };
-    /**
-     * Utility to return the baseline offset and total line height from the font
-     * size.
-     *
-     * @function Highcharts.SVGRenderer#fontMetrics
-     *
-     * @param {number|string} [fontSize]
-     *        The current font size to inspect. If not given, the font size
-     *        will be found from the DOM element.
-     *
-     * @param {Highcharts.SVGElement|Highcharts.SVGDOMElement} [elem]
-     *        The element to inspect for a current font size.
-     *
-     * @return {Highcharts.FontMetricsObject}
-     *         The font metrics.
-     */
-    SVGRenderer.prototype.fontMetrics = function (fontSize, elem) {
-        if ((this.styledMode || !/px/.test(fontSize)) &&
-            win.getComputedStyle // old IE doesn't support it
-        ) {
-            fontSize = elem && SVGElement.prototype.getStyle.call(elem, 'font-size');
-        }
-        else {
-            fontSize = fontSize ||
-                // When the elem is a DOM element (#5932)
-                (elem && elem.style && elem.style.fontSize) ||
-                // Fall back on the renderer style default
-                (this.style && this.style.fontSize);
-        }
-        // Handle different units
-        if (/px/.test(fontSize)) {
-            fontSize = pInt(fontSize);
-        }
-        else {
-            fontSize = 12;
-        }
-        // Empirical values found by comparing font size and bounding box
-        // height. Applies to the default font family.
-        // https://jsfiddle.net/highcharts/7xvn7/
-        var lineHeight = (fontSize < 24 ?
-            fontSize + 3 :
-            Math.round(fontSize * 1.2)), baseline = Math.round(lineHeight * 0.8);
-        return {
-            h: lineHeight,
-            b: baseline,
-            f: fontSize
-        };
-    };
-    /**
-     * Correct X and Y positioning of a label for rotation (#1764).
-     *
-     * @private
-     * @function Highcharts.SVGRenderer#rotCorr
-     */
-    SVGRenderer.prototype.rotCorr = function (baseline, rotation, alterY) {
-        var y = baseline;
-        if (rotation && alterY) {
-            y = Math.max(y * Math.cos(rotation * deg2rad), 4);
-        }
-        return {
-            x: (-baseline / 3) * Math.sin(rotation * deg2rad),
-            y: y
-        };
-    };
-    /**
-     * Compatibility function to convert the legacy one-dimensional path array
-     * into an array of segments.
-     *
-     * It is used in maps to parse the `path` option, and in SVGRenderer.dSetter
-     * to support legacy paths from demos.
-     *
-     * @private
-     * @function Highcharts.SVGRenderer#pathToSegments
-     */
-    SVGRenderer.prototype.pathToSegments = function (path) {
-        var ret = [];
-        var segment = [];
-        var commandLength = {
-            A: 8,
-            C: 7,
-            H: 2,
-            L: 3,
-            M: 3,
-            Q: 5,
-            S: 5,
-            T: 3,
-            V: 2
-        };
-        // Short, non-typesafe parsing of the one-dimensional array. It splits
-        // the path on any string. This is not type checked against the tuple
-        // types, but is shorter, and doesn't require specific checks for any
-        // command type in SVG.
-        for (var i = 0; i < path.length; i++) {
-            // Command skipped, repeat previous or insert L/l for M/m
-            if (isString(segment[0]) &&
-                isNumber(path[i]) &&
-                segment.length === commandLength[(segment[0].toUpperCase())]) {
-                path.splice(i, 0, segment[0].replace('M', 'L').replace('m', 'l'));
-            }
-            // Split on string
-            if (typeof path[i] === 'string') {
-                if (segment.length) {
-                    ret.push(segment.slice(0));
-                }
-                segment.length = 0;
-            }
-            segment.push(path[i]);
-        }
-        ret.push(segment.slice(0));
-        return ret;
-        /*
-        // Fully type-safe version where each tuple type is checked. The
-        // downside is filesize and a lack of flexibility for unsupported
-        // commands
-        const ret: SVGPath = [],
-            commands = {
-                A: 7,
-                C: 6,
-                H: 1,
-                L: 2,
-                M: 2,
-                Q: 4,
-                S: 4,
-                T: 2,
-                V: 1,
-                Z: 0
-            };
-
-        let i = 0,
-            lastI = 0,
-            lastCommand;
-
-        while (i < path.length) {
-            const item = path[i];
-
-            let command;
-
-            if (typeof item === 'string') {
-                command = item;
-                i += 1;
-            } else {
-                command = lastCommand || 'M';
-            }
-
-            // Upper case
-            const commandUC = command.toUpperCase();
-
-            if (commandUC in commands) {
-
-                // No numeric parameters
-                if (command === 'Z' || command === 'z') {
-                    ret.push([command]);
-
-                // One numeric parameter
-                } else {
-                    const val0 = path[i];
-                    if (typeof val0 === 'number') {
-
-                        // Horizontal line to
-                        if (command === 'H' || command === 'h') {
-                            ret.push([command, val0]);
-                            i += 1;
-
-                        // Vertical line to
-                        } else if (command === 'V' || command === 'v') {
-                            ret.push([command, val0]);
-                            i += 1;
-
-                        // Two numeric parameters
-                        } else {
-                            const val1 = path[i + 1];
-                            if (typeof val1 === 'number') {
-                                // lineTo
-                                if (command === 'L' || command === 'l') {
-                                    ret.push([command, val0, val1]);
-                                    i += 2;
-
-                                // moveTo
-                                } else if (command === 'M' || command === 'm') {
-                                    ret.push([command, val0, val1]);
-                                    i += 2;
-
-                                // Smooth quadratic bezier
-                                } else if (command === 'T' || command === 't') {
-                                    ret.push([command, val0, val1]);
-                                    i += 2;
-
-                                // Four numeric parameters
-                                } else {
-                                    const val2 = path[i + 2],
-                                        val3 = path[i + 3];
-                                    if (
-                                        typeof val2 === 'number' &&
-                                        typeof val3 === 'number'
-                                    ) {
-                                        // Quadratic bezier to
-                                        if (
-                                            command === 'Q' ||
-                                            command === 'q'
-                                        ) {
-                                            ret.push([
-                                                command,
-                                                val0,
-                                                val1,
-                                                val2,
-                                                val3
-                                            ]);
-                                            i += 4;
-
-                                        // Smooth cubic bezier to
-                                        } else if (
-                                            command === 'S' ||
-                                            command === 's'
-                                        ) {
-                                            ret.push([
-                                                command,
-                                                val0,
-                                                val1,
-                                                val2,
-                                                val3
-                                            ]);
-                                            i += 4;
-
-                                        // Six numeric parameters
-                                        } else {
-                                            const val4 = path[i + 4],
-                                                val5 = path[i + 5];
-
-                                            if (
-                                                typeof val4 === 'number' &&
-                                                typeof val5 === 'number'
-                                            ) {
-                                                // Curve to
-                                                if (
-                                                    command === 'C' ||
-                                                    command === 'c'
-                                                ) {
-                                                    ret.push([
-                                                        command,
-                                                        val0,
-                                                        val1,
-                                                        val2,
-                                                        val3,
-                                                        val4,
-                                                        val5
-                                                    ]);
-                                                    i += 6;
-
-                                                // Seven numeric parameters
-                                                } else {
-                                                    const val6 = path[i + 6];
-
-                                                    // Arc to
-                                                    if (
-                                                        typeof val6 ===
-                                                        'number' &&
-                                                        (
-                                                            command === 'A' ||
-                                                            command === 'a'
-                                                        )
-                                                    ) {
-                                                        ret.push([
-                                                            command,
-                                                            val0,
-                                                            val1,
-                                                            val2,
-                                                            val3,
-                                                            val4,
-                                                            val5,
-                                                            val6
-                                                        ]);
-                                                        i += 7;
-
-                                                    }
-
-                                                }
-                                            }
-                                        }
-                                    }
-                                }
-                            }
-
-                        }
-                    }
-                }
-            }
-
-            // An unmarked command following a moveTo is a lineTo
-            lastCommand = command === 'M' ? 'L' : command;
-
-            if (i === lastI) {
-                break;
-            }
-            lastI = i;
-        }
-        return ret;
-        */
-    };
-    /**
-     * Draw a label, which is an extended text element with support for border
-     * and background. Highcharts creates a `g` element with a text and a `path`
-     * or `rect` inside, to make it behave somewhat like a HTML div. Border and
-     * background are set through `stroke`, `stroke-width` and `fill` attributes
-     * using the {@link Highcharts.SVGElement#attr|attr} method. To update the
-     * text after render, run `label.attr({ text: 'New text' })`.
-     *
-     * @sample highcharts/members/renderer-label-on-chart/
-     *         A label on the chart
-     *
-     * @function Highcharts.SVGRenderer#label
-     *
-     * @param {string} str
-     *        The initial text string or (subset) HTML to render.
-     *
-     * @param {number} x
-     *        The x position of the label's left side.
-     *
-     * @param {number} [y]
-     *        The y position of the label's top side or baseline, depending on
-     *        the `baseline` parameter.
-     *
-     * @param {string} [shape='rect']
-     *        The shape of the label's border/background, if any. Defaults to
-     *        `rect`. Other possible values are `callout` or other shapes
-     *        defined in {@link Highcharts.SVGRenderer#symbols}.
-     *
-     * @param {number} [anchorX]
-     *        In case the `shape` has a pointer, like a flag, this is the
-     *        coordinates it should be pinned to.
-     *
-     * @param {number} [anchorY]
-     *        In case the `shape` has a pointer, like a flag, this is the
-     *        coordinates it should be pinned to.
-     *
-     * @param {boolean} [useHTML=false]
-     *        Wether to use HTML to render the label.
-     *
-     * @param {boolean} [baseline=false]
-     *        Whether to position the label relative to the text baseline,
-     *        like {@link Highcharts.SVGRenderer#text|renderer.text}, or to the
-     *        upper border of the rectangle.
-     *
-     * @param {string} [className]
-     *        Class name for the group.
-     *
-     * @return {Highcharts.SVGElement}
-     *         The generated label.
-     */
-    SVGRenderer.prototype.label = function (str, x, y, shape, anchorX, anchorY, useHTML, baseline, className) {
-        return new SVGLabel(this, str, x, y, shape, anchorX, anchorY, useHTML, baseline, className);
-    };
-    /**
-     * Re-align all aligned elements.
-     *
-     * @private
-     * @function Highcharts.SVGRenderer#alignElements
-     */
-    SVGRenderer.prototype.alignElements = function () {
-        this.alignedObjects.forEach(function (el) { return el.align(); });
-    };
-    return SVGRenderer;
-}());
-extend(SVGRenderer.prototype, {
-    /**
-     * A pointer to the renderer's associated Element class. The VMLRenderer
-     * will have a pointer to VMLElement here.
-     *
-     * @name Highcharts.SVGRenderer#Element
-     * @type {Highcharts.SVGElement}
-     */
-    Element: SVGElement,
-    SVG_NS: SVG_NS,
-    /**
-     * A collection of characters mapped to HTML entities. When `useHTML` on an
-     * element is true, these entities will be rendered correctly by HTML. In
-     * the SVG pseudo-HTML, they need to be unescaped back to simple characters,
-     * so for example `&lt;` will render as `<`.
-     *
-     * @example
-     * // Add support for unescaping quotes
-     * Highcharts.SVGRenderer.prototype.escapes['"'] = '&quot;';
-     *
-     * @name Highcharts.SVGRenderer#escapes
-     * @type {Highcharts.Dictionary<string>}
-     */
-    escapes: {
-        '&': '&amp;',
-        '<': '&lt;',
-        '>': '&gt;',
-        "'": '&#39;',
-        '"': '&quot;'
-    },
-    /**
-     * An extendable collection of functions for defining symbol paths.
-     *
-     * @name Highcharts.SVGRenderer#symbols
-     * @type {Highcharts.SymbolDictionary}
-     */
-    symbols: Symbols,
-    /**
-     * Dummy function for plugins, called every time the renderer is updated.
-     * Prior to Highcharts 5, this was used for the canvg renderer.
-     *
-     * @deprecated
-     * @function Highcharts.SVGRenderer#draw
-     */
-    draw: noop
-});
-/* *
- *
- *  Registry
- *
- * */
-RendererRegistry.registerRendererType('svg', SVGRenderer, true);
-/* *
- *
- *  Export Default
- *
- * */
-export default SVGRenderer;
-/* *
- *
- *  API Declarations
- *
- * */
-/**
- * A clipping rectangle that can be applied to one or more {@link SVGElement}
- * instances. It is instanciated with the {@link SVGRenderer#clipRect} function
- * and applied with the {@link SVGElement#clip} function.
- *
- * @example
- * let circle = renderer.circle(100, 100, 100)
- *     .attr({ fill: 'red' })
- *     .add();
- * let clipRect = renderer.clipRect(100, 100, 100, 100);
- *
- * // Leave only the lower right quarter visible
- * circle.clip(clipRect);
- *
- * @typedef {Highcharts.SVGElement} Highcharts.ClipRectElement
- */
-/**
- * The font metrics.
- *
- * @interface Highcharts.FontMetricsObject
- */ /**
-* The baseline relative to the top of the box.
-*
-* @name Highcharts.FontMetricsObject#b
-* @type {number}
-*/ /**
-* The font size.
-*
-* @name Highcharts.FontMetricsObject#f
-* @type {number}
-*/ /**
-* The line height.
-*
-* @name Highcharts.FontMetricsObject#h
-* @type {number}
-*/
-/**
- * An object containing `x` and `y` properties for the position of an element.
- *
- * @interface Highcharts.PositionObject
- */ /**
-* X position of the element.
-* @name Highcharts.PositionObject#x
-* @type {number}
-*/ /**
-* Y position of the element.
-* @name Highcharts.PositionObject#y
-* @type {number}
-*/
-/**
- * A rectangle.
- *
- * @interface Highcharts.RectangleObject
- */ /**
-* Height of the rectangle.
-* @name Highcharts.RectangleObject#height
-* @type {number}
-*/ /**
-* Width of the rectangle.
-* @name Highcharts.RectangleObject#width
-* @type {number}
-*/ /**
-* Horizontal position of the rectangle.
-* @name Highcharts.RectangleObject#x
-* @type {number}
-*/ /**
-* Vertical position of the rectangle.
-* @name Highcharts.RectangleObject#y
-* @type {number}
-*/
-/**
- * The shadow options.
- *
- * @interface Highcharts.ShadowOptionsObject
- */ /**
-* The shadow color.
-* @name    Highcharts.ShadowOptionsObject#color
-* @type    {Highcharts.ColorString|undefined}
-* @default #000000
-*/ /**
-* The horizontal offset from the element.
-*
-* @name    Highcharts.ShadowOptionsObject#offsetX
-* @type    {number|undefined}
-* @default 1
-*/ /**
-* The vertical offset from the element.
-* @name    Highcharts.ShadowOptionsObject#offsetY
-* @type    {number|undefined}
-* @default 1
-*/ /**
-* The shadow opacity.
-*
-* @name    Highcharts.ShadowOptionsObject#opacity
-* @type    {number|undefined}
-* @default 0.15
-*/ /**
-* The shadow width or distance from the element.
-* @name    Highcharts.ShadowOptionsObject#width
-* @type    {number|undefined}
-* @default 3
-*/
-/**
- * @interface Highcharts.SizeObject
- */ /**
-* @name Highcharts.SizeObject#height
-* @type {number}
-*/ /**
-* @name Highcharts.SizeObject#width
-* @type {number}
-*/
-/**
- * Array of path commands, that will go into the `d` attribute of an SVG
- * element.
- *
- * @typedef {Array<(Array<Highcharts.SVGPathCommand>|Array<Highcharts.SVGPathCommand,number>|Array<Highcharts.SVGPathCommand,number,number>|Array<Highcharts.SVGPathCommand,number,number,number,number>|Array<Highcharts.SVGPathCommand,number,number,number,number,number,number>|Array<Highcharts.SVGPathCommand,number,number,number,number,number,number,number>)>} Highcharts.SVGPathArray
- */
-/**
- * Possible path commands in an SVG path array. Valid values are `A`, `C`, `H`,
- * `L`, `M`, `Q`, `S`, `T`, `V`, `Z`.
- *
- * @typedef {string} Highcharts.SVGPathCommand
- * @validvalue ["a","c","h","l","m","q","s","t","v","z","A","C","H","L","M","Q","S","T","V","Z"]
- */
-/**
- * An extendable collection of functions for defining symbol paths. Symbols are
- * used internally for point markers, button and label borders and backgrounds,
- * or custom shapes. Extendable by adding to {@link SVGRenderer#symbols}.
- *
- * @interface Highcharts.SymbolDictionary
- */ /**
-* @name Highcharts.SymbolDictionary#[key:string]
-* @type {Function|undefined}
-*/ /**
-* @name Highcharts.SymbolDictionary#arc
-* @type {Function|undefined}
-*/ /**
-* @name Highcharts.SymbolDictionary#callout
-* @type {Function|undefined}
-*/ /**
-* @name Highcharts.SymbolDictionary#circle
-* @type {Function|undefined}
-*/ /**
-* @name Highcharts.SymbolDictionary#diamond
-* @type {Function|undefined}
-*/ /**
-* @name Highcharts.SymbolDictionary#square
-* @type {Function|undefined}
-*/ /**
-* @name Highcharts.SymbolDictionary#triangle
-* @type {Function|undefined}
-*/
-/**
- * Can be one of `arc`, `callout`, `circle`, `diamond`, `square`, `triangle`,
- * and `triangle-down`. Symbols are used internally for point markers, button
- * and label borders and backgrounds, or custom shapes. Extendable by adding to
- * {@link SVGRenderer#symbols}.
- *
- * @typedef {"arc"|"callout"|"circle"|"diamond"|"square"|"triangle"|"triangle-down"} Highcharts.SymbolKeyValue
- */
-/**
- * Additional options, depending on the actual symbol drawn.
- *
- * @interface Highcharts.SymbolOptionsObject
- */ /**
-* The anchor X position for the `callout` symbol. This is where the chevron
-* points to.
-*
-* @name Highcharts.SymbolOptionsObject#anchorX
-* @type {number|undefined}
-*/ /**
-* The anchor Y position for the `callout` symbol. This is where the chevron
-* points to.
-*
-* @name Highcharts.SymbolOptionsObject#anchorY
-* @type {number|undefined}
-*/ /**
-* The end angle of an `arc` symbol.
-*
-* @name Highcharts.SymbolOptionsObject#end
-* @type {number|undefined}
-*/ /**
-* Whether to draw `arc` symbol open or closed.
-*
-* @name Highcharts.SymbolOptionsObject#open
-* @type {boolean|undefined}
-*/ /**
-* The radius of an `arc` symbol, or the border radius for the `callout` symbol.
-*
-* @name Highcharts.SymbolOptionsObject#r
-* @type {number|undefined}
-*/ /**
-* The start angle of an `arc` symbol.
-*
-* @name Highcharts.SymbolOptionsObject#start
-* @type {number|undefined}
-*/
-(''); // keeps doclets above in transpiled file