# Class: SVGElement

## Highcharts. SVGElement

#### new SVGElement()

  The SVGElement prototype is a JavaScript wrapper for SVG elements used in the rendering layer of Highcharts. Combined with the Highcharts.SVGRenderer object, these prototypes allow freeform annotation in the charts or even in HTML pages without instanciating a chart. The SVGElement can also wrap HTML labels, when `text` or `label` elements are created with the `useHTML` parameter.

  The SVGElement instances are created through factory functions on the Highcharts.SVGRenderer object, like rect, path, text, label, g and more.

  See How to use the SVG Renderer for a comprehensive tutorial on how to draw SVG elements on a chart.

### Members

#### element :Highcharts.SVGDOMElement|Highcharts.HTMLDOMElement

  The primary DOM node. Each `SVGElement` instance wraps a main DOM node, but may also represent more nodes.

  ##### Type:

  - Highcharts.SVGDOMElement | Highcharts.HTMLDOMElement

#### renderer :Highcharts.SVGRenderer

  The renderer that the SVGElement belongs to.

  ##### Type:

  - Highcharts.SVGRenderer

### Methods

#### add( [parent])

  Add the element to the DOM. All elements must be added this way.

  ##### Parameters:

  Name | Type | Argument | Description
  --- | --- | --- | ---
  `parent` | Highcharts.SVGElement | <optional> | The parent item to add it to. If undefined, the element is added to the Highcharts.SVGRenderer.box.

  ##### Returns:

  Highcharts.SVGElement .

  Returns the SVGElement for chaining.

  ##### Try it

  - Elements added to a group.

#### addClass(className [, replace])

  Add a class name to an element.

  ##### Parameters:

  Name | Type | Argument | Default | Description
  --- | --- | --- | --- | ---
  `className` | string |  |  | The new class name to add.
  `replace` | boolean | <optional> | false | When true, the existing class name(s) will be overwritten with the new one. When false, the new one is added.

  ##### Returns:

  Highcharts.SVGElement .

  Return the SVG element for chainability.

#### align( [alignOptions] [, alignByTranslate] [, alignTo] [, redraw])

  Align the element relative to the chart or another box.

  ##### Parameters:

  Name | Type | Argument | Description
  --- | --- | --- | ---
  `alignOptions` | Highcharts.AlignObject | <optional> | The alignment options. The function can be called without this parameter in order to re-align an element after the box has been updated.
  `alignByTranslate` | boolean | <optional> | Align element by translation.
  `alignTo` | string | Highcharts.BBoxObject | <optional> | The box to align to, needs a width and height. When the box is a string, it refers to an object in the Renderer. For example, when box is `spacingBox`, it refers to `Renderer.spacingBox` which holds `width`, `height`, `x` and `y` properties.
  `redraw` | boolean | <optional> | Decide if SVGElement should be redrawn with new alignment or just change its attributes.

  ##### Returns:

  Highcharts.SVGElement .

  Returns the SVGElement for chaining.

#### animate(params [, options] [, complete])

  Animate to given attributes or CSS properties.

  ##### Parameters:

  Name | Type | Argument | Description
  --- | --- | --- | ---
  `params` | Highcharts.SVGAttributes |  | SVG attributes or CSS to animate.
  `options` | boolean | Partial.<Highcharts.AnimationOptionsObject> | <optional> | Animation options.
  `complete` | function | <optional> | Function to perform at the end of animation.

  ##### Returns:

  Highcharts.SVGElement .

  Returns the SVGElement for chaining.

  ##### Try it

  - Setting some attributes by animation.

#### attr(key)

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `key` | string |

  ##### Returns:

#### attr( [hash] [, val] [, complete] [, continueAnimation])

  Apply native and custom attributes to the SVG elements.

  In order to set the rotation center for rotation, set x and y to 0 and use `translateX` and `translateY` attributes to position the element instead.

  Attributes frequently used in Highcharts are `fill`, `stroke`, `stroke-width`.

  ##### Parameters:

  Name | Type | Argument | Default | Description
  --- | --- | --- | --- | ---
  `hash` | string | Highcharts.SVGAttributes | <optional> |  | The native and custom SVG attributes.
  `val` | number | string | Highcharts.SVGPathArray | <optional> |  | If the type of the first argument is `string`, the second can be a value, which will serve as a single attribute setter. If the first argument is a string and the second is undefined, the function serves as a getter and the current value of the property is returned.
  `complete` | function | <optional> |  | A callback function to execute after setting the attributes. This makes the function compliant and interchangeable with the Highcharts.SVGElement#animate function.
  `continueAnimation` | boolean | <optional> | true | Used internally when `.attr` is called as part of an animation step. Otherwise, calling `.attr` for an attribute will stop animation for that attribute.

  ##### Returns:

  Highcharts.SVGElement .

  If used as a setter, it returns the current Highcharts.SVGElement so the calls can be chained. If used as a getter, the current value of the attribute is returned.

  ##### Example

      // Set multiple attributes
      element.attr({
          stroke: 'red',
          fill: 'blue',
          x: 10,
          y: 10
      });

      // Set a single attribute
      element.attr('stroke', 'red');

      // Get an attribute
      element.attr('stroke'); // => 'red'

  ##### Try it

  - Setting some attributes.

#### clip( [clipElem])

  Apply a clipping shape to this element.

  ##### Parameters:

  Name | Type | Argument | Description
  --- | --- | --- | ---
  `clipElem` | Highcharts.SVGElement | <optional> | The clipping shape. If skipped, the current clip is removed.

  ##### Returns:

  Highcharts.SVGElement .

  Returns the SVG element to allow chaining.

#### crisp(rect [, strokeWidth])

  Calculate the coordinates needed for drawing a rectangle crisply and return the calculated attributes.

  ##### Parameters:

  Name | Type | Argument | Description
  --- | --- | --- | ---
  `rect` | Highcharts.RectangleObject |  | Rectangle to crisp.
  `strokeWidth` | number | <optional> | The stroke width to consider when computing crisp positioning. It can also be set directly on the rect parameter.

  ##### Returns:

  Highcharts.RectangleObject .

  The modified rectangle arguments.

#### css(styles)

  Set styles for the element. In addition to CSS styles supported by native SVG and HTML elements, there are also some custom made for Highcharts, like `width`, `ellipsis` and `textOverflow` for SVG text elements.

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `styles` | Highcharts.CSSObject | The new CSS styles.

  ##### Returns:

  Highcharts.SVGElement .

  Return the SVG element for chaining.

  ##### Try it

  - Styled text.

#### destroy()

  Destroy the element and element wrapper and clear up the DOM and event hooks.

#### fadeIn( [animation])

  A general fadeIn method.

  ##### Parameters:

  Name | Type | Argument | Description
  --- | --- | --- | ---
  `animation` | boolean | Partial.<Highcharts.AnimationOptionsObject> | <optional> | The animation options for the element fade.

  ##### Requires:

  - module:modules/drilldown

#### getBBox( [reload] [, rot])

  Get the bounding box (width, height, x and y) for the element. Generally used to get rendered text size. Since this is called a lot in charts, the results are cached based on text properties, in order to save DOM traffic. The returned bounding box includes the rotation, so for example a single text line of rotation 90 will report a greater height, and a width corresponding to the line-height.

  ##### Parameters:

  Name | Type | Argument | Description
  --- | --- | --- | ---
  `reload` | boolean | <optional> | Skip the cache and get the updated DOM bounding box.
  `rot` | number | <optional> | Override the element's rotation. This is internally used on axis labels with a value of 0 to find out what the bounding box would be have been if it were not rotated.

  ##### Returns:

  Highcharts.BBoxObject .

  The bounding box with `x`, `y`, `width` and `height` properties.

  ##### Try it

  - Draw a rectangle based on a text's bounding box.

#### getBBoxCacheKey()

  Overridable method to get a cache key for the bounding box of this element.

  ##### Returns:

  string | void .

  The cache key based on the text properties.

  ##### Example

      // Plugin to let the getBBox function respond to font family changes
      (({ SVGElement }) => {
      const getBBoxCacheKey = SVGElement.prototype.getBBoxCacheKey;
        SVGElement.prototype.getBBoxCacheKey = function (keys) {
          const key = getBBoxCacheKey.call(this, keys);
          const fontFamily = this.styles.fontFamily;
          return key + (fontFamily ? `,${fontFamily}` : '');
        };
      })(Highcharts);

#### getStyle(prop)

  Get the computed style. Only in styled mode.

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `prop` | string | The property name to check for.

  ##### Returns:

  string .

  The current computed value.

  ##### Example

      chart.series[0].points[0].graphic.getStyle('stroke-width'); // => '1px'

#### hasClass(className)

  Check if an element has the given class name.

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `className` | string | The class name to check for.

  ##### Returns:

  boolean .

  Whether the class name is found.

#### hide()

  Hide the element, similar to setting the `visibility` attribute to `hidden`.

  ##### Returns:

  Highcharts.SVGElement .

  Returns the SVGElement for chaining.

#### init(renderer, nodeName)

  Initialize the SVG element. This function only exists to make the initialization process overridable. It should not be called directly.

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `renderer` | Highcharts.SVGRenderer | The SVGRenderer instance to initialize to.
  `nodeName` | string | The SVG node name.

#### on(eventType, handler)

  Add an event listener. This is a simple setter that replaces the previous event of the same type added by this function, as opposed to the Highcharts#addEvent function.

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `eventType` | string | The event type.
  `handler` | function | The handler callback.

  ##### Returns:

  Highcharts.SVGElement .

  The SVGElement for chaining.

  ##### Try it

  - A clickable rectangle.

#### removeClass(className)

  Remove a class name from the element.

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `className` | string | RegExp | The class name to remove.

  ##### Returns:

  Highcharts.SVGElement .

  Returns the SVG element for chainability.

#### setRadialReference(coordinates)

  Set the coordinates needed to draw a consistent radial gradient across a shape regardless of positioning inside the chart. Used on pie slices to make all the slices have the same radial reference point.

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `coordinates` | Array.<number> | The center reference. The format is `[centerX, centerY, diameter]` in pixels.

  ##### Returns:

  Highcharts.SVGElement .

  Returns the SVGElement for chaining.

#### shadow( [shadowOptions])

  Add a shadow to the element. In styled mode, this method is not used, instead use `defs` and filters.

  ##### Parameters:

  Name | Type | Argument | Description
  --- | --- | --- | ---
  `shadowOptions` | boolean | Highcharts.ShadowOptionsObject | <optional> | The shadow options. If `true`, the default options are applied. If `false`, the current shadow will be removed.

  ##### Returns:

  Highcharts.SVGElement .

  Returns the SVGElement for chaining.

  ##### Example

      renderer.rect(10, 100, 100, 100)
          .attr({ fill: 'red' })
          .shadow(true);

#### show( [inherit])

  Show the element after it has been hidden.

  ##### Parameters:

  Name | Type | Argument | Default | Description
  --- | --- | --- | --- | ---
  `inherit` | boolean | <optional> | true | Set the visibility attribute to `inherit` rather than `visible`. The difference is that an element with `visibility="visible"` will be visible even if the parent is hidden.

  ##### Returns:

  Highcharts.SVGElement .

  Returns the SVGElement for chaining.

#### strokeWidth()

  Get the computed stroke width in pixel values. This is used extensively when drawing shapes to ensure the shapes are rendered crisp and positioned correctly relative to each other. Using `shape-rendering: crispEdges` leaves us less control over positioning, for example when we want to stack columns next to each other, or position things pixel-perfectly within the plot box.

  The common pattern when placing a shape is:

  - Create the SVGElement and add it to the DOM. In styled mode, it will now receive a stroke width from the style sheet. In classic mode we will add the `stroke-width` attribute.
  - Read the computed `elem.strokeWidth()`.
  - Place it based on the stroke width.

  ##### Returns:

  number .

  The stroke width in pixels. Even if the given stroke width (in CSS or by attributes) is based on `em` or other units, the pixel size is returned.

#### toFront()

  Bring the element to the front. Alternatively, a new zIndex can be set.

  ##### Returns:

  Highcharts.SVGElement .

  Returns the SVGElement for chaining.

  ##### Try it

  - Click an element to bring it to front.

#### translate(x, y)

  Move an object and its children by x and y values.

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `x` | number | The x value.
  `y` | number | The y value.

  ##### Returns:

  Highcharts.SVGElement .

  Translated element.