SVGStyleElement: sheet property

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨March 2023⁩.

TheSVGStyleElement.sheet read-only property returns theCSSStyleSheet corresponding to the given SVG style element, ornull if there is none.

Value

ACSSStyleSheet, ornull if the element has no associated style sheet.

Examples

This example demonstrates how to get the CSS sheet associated with an element.

HTML

The HTML contains an SVG definition for a<circle>.

html

<textarea rows="3" cols="50"></textarea><svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink">  <circle cx="50" cy="50" r="25" /></svg>

JavaScript

The code below creates astyle element (anSVGStyleElement) and adds it to the SVG.

const svg = document.querySelector("svg");// Create the `style` element in the SVG namespaceconst style = document.createElementNS("http://www.w3.org/2000/svg", "style");const node = document.createTextNode("circle { fill: red; }");svg.appendChild(style);style.appendChild(node);

The code below then logs the sheet and CSS rule associated with this new element, usingstyle.sheet.To make

// Log the sheet associated with this new element.const log = document.getElementById("log");log.value = `${style.sheet} with rules[0].cssText:\n ${style.sheet.rules[0].cssText}`;