SVGElement.dataset

The SVGElement.dataset property allows access, both in reading and writing mode, to all the custom data attributes (data-*) set on the element. It is a map of DOMStrings representing keys to DOMStrings representing the values for those keys, with one entry for each custom data attribute. Each key corresponds to the name of a custom data attribute; for example, a custom attribute named data-foo is in the map with the key "foo".

The name of a custom data attribute begins with "data-". It must contain only letters, numbers and the following characters: dash (-), dot (.), colon (:), underscore (_). Moreover, it should not contain ASCII capital letters (A to Z).

A custom data attribute name is transformed to a key for the DOMStringMap entry with the following rules:

  • the prefix "data-" is removed (including the dash);
  • for any dash (U+002D) followed by an ASCII lowercase letter a to z, the dash is removed and the letter is transformed into its uppercase counterpart;
  • other characters (including other dashes) are left unchanged.

The opposite transformation, that maps a key to an attribute name, uses the following rules:

  • Restriction: A dash must not be immediately followed by an ASCII lowercase letter a to z (before the transformation);
  • a prefix "data-" is added;
  • any ASCII uppercase letter A to Z is transformed into a dash followed by its lowercase counterpart;
  • other characters are left unchanged.

The restrictions established in the rules above ensures that the two transformations are the inverse one of the other.

For example, the attribute named "data-abc-def" corresponds to the key "abcDef".

Syntax

string = SVGElement.dataset.camelCasedName;

SVGElement.dataset.camelCasedName = string;

Value

The value of dataset is a DOMStringMap object mapping key names to values; both the key names and the values are, themselves, DOMString objects. You can access an individual value by using the syntax SVGElement.dataset.keyName to refer to the key.

Examples

<div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe
</div>

var el = document.querySelector('#user');

// el.id == 'user'
// el.dataset.id === '1234567890'
// el.dataset.user === 'johndoe'
// el.dataset.dateOfBirth === ''

el.dataset.dateOfBirth = '1960-10-03'; // set the DOB.

// 'someDataAttr' in el.dataset === false

el.dataset.someDataAttr = 'mydata';
// 'someDataAttr' in el.dataset === true

Specifications

Specification Status Comment
Scalable Vector Graphics (SVG) 2
The definition of 'SVGElement.dataset' in that specification.
Candidate Recommendation This attribute was added to the specification in SVG 2.

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support55 No51 No4110
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support5555 No514110 ?

See also

Document Tags and Contributors

Contributors to this page: fscholz, xehpuk, jpmedley, hasalex, Sheppy
Last updated by: fscholz,