W3cubDocs

/Web APIs

SVGStyleElement: sheet property

The SVGStyleElement.sheet read-only property returns the CSSStyleSheet corresponding to the given SVG style element, or null if there is none.

Value

A CSSStyleSheet, or null 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 id="log" 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 a style element (an SVGStyleElement) and adds it to the SVG.

js

const svg = document.querySelector("svg");
// Create the `style` element in the SVG namespace
const 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, using style.sheet. To make

js

// 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}`;

Result

The result is shown below. On success, the log shows the CSSStyleSheet object applied to the SVG circle.

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
sheet 38 12 1.5 9 25≤12.1–15 16.4 38 38 4 25≤12.1–14 16.4 3.0

See also

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/SVGStyleElement/sheet