SVGElement: attributeStyleMap property

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

TheattributeStyleMap read-only property of theSVGElement interface returns a liveStylePropertyMap object that contains a list of style properties of the element that are defined in the element's inlinestyle attribute, or assigned using thestyle property of theSVGElement interface via script.

Shorthand properties are expanded. If you setborder-top: 1px solid black, the longhand properties (border-top-color,border-top-style, andborder-top-width) are set instead.

The main difference betweenstyle property andattributeStyleMap property is that, thestyle property will return aCSSStyleDeclaration object, while theattributeStyleMap property will return aStylePropertyMap object.

Though the property itself is not writable, you could read and write inline styles through theStylePropertyMap object that it returns, just like through theCSSStyleDeclaration object that returns via thestyle property.

Value

A liveStylePropertyMap object.

Examples

The following code snippet shows the relationship between thestyle attribute and theattributeStyleMap property:

html

<svg  xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 250 250"  width="250"  height="250">  <circle    cx="100"    cy="100"    r="50"       /></svg><div></div>

css

#el {  font-size: 16px;}#output {  white-space: pre-line;}

const element = document.getElementById("el");const output = document.getElementById("output");for (const property of element.attributeStyleMap) {  output.textContent += `${property[0]} = ${property[1][0].toString()}\n`;}