Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from http://developer.mozilla.org/en-US/docs/Web/API/SVGStyleElement/sheet below:

SVGStyleElement: sheet property - Web APIs

Baseline 2023

Newly available

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

A CSSStyleSheet, or null if the element has no associated style sheet.

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

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

<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>

The code below creates a style element (an SVGStyleElement) and adds it to the SVG.

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

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

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

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4