The data-*
SVG attributes are called custom data attributes. They let SVG markup and its resulting DOM share information that standard attributes can't, usually for scripting purposes. Their custom data are available via the SVGElement
interface of the element the attributes belong to, with the SVGElement.dataset
property.
The *
can be replaced by any characters allowed in XML's rules for names, with the following restrictions:
- Can't start with
xml
. - No semicolons (
;
,U+003A
). - No capital
A
toZ
letters.
The SVGElement.dataset
property is a DOMStringMap
that provides the attribute data-test-value
via SVGElement.dataset.testValue
. Hyphen characters (-
, U+002D
) are removed and the next letter is capitalized, resulting in the camelCase format.
Specifications
Specification | Status | Comment |
---|---|---|
Scalable Vector Graphics (SVG) 2 The definition of 'data-*' in that specification. |
Candidate Recommendation | Custom data attributes are new in SVG 2. |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
data | Chrome Full support 55 | Edge Full support ≤79 | Firefox Full support 51 | IE ? | Opera Full support 42 | Safari Full support 10 | WebView Android Full support 55 | Chrome Android Full support 55 | Firefox Android Full support 51 | Opera Android Full support 42 | Safari iOS Full support 10 | Samsung Internet Android Full support 6.0 |
Legend
- Full support
- Full support
- Compatibility unknown
- Compatibility unknown
See also
SVGElement
- The
SVGElement.dataset
property used to access these attributes from scripts. - Using data attributes