SVGStyleElement

Dieses Interface erbt auch Eigenschaften von seinem übergeordneten Interface, SVGElement.

SVGStyleElement.type Veraltet

Ein String, der dem type-Attribut des gegebenen Elements entspricht.

SVGStyleElement.media

Ein String, der dem media-Attribut des gegebenen Elements entspricht.

SVGStyleElement.title

Ein String, der dem title-Attribut des gegebenen Elements entspricht.

SVGStyleElement.sheet Schreibgeschützt

Gibt das CSSStyleSheet-Objekt zurück, das mit dem gegebenen Element assoziiert ist, oder null, wenn keines vorhanden ist.

SVGStyleElement.disabled

Ein Boolescher Wert, der angibt, ob das assoziierte Stylesheet deaktiviert ist oder nicht.

Dieses Interface implementiert keine spezifischen Methoden, erbt jedoch Methoden von seinem übergeordneten Interface, SVGElement.

Um ein SVG-Style-Element (SVGStyleElement) dynamisch zu erstellen, müssen Sie Document.createElementNS() verwenden und dabei ein style-Element im SVG-Namespace angeben.

Angenommen ist das folgende SVG-Element:

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

Sie können ein SVG-Style-Element wie folgt erstellen:

// Get the SVG element object by tag name
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; }");
style.appendChild(node);

// Append the style element to the SVG element
svg.appendChild(style);

Sie können auf ein SVG-Style-Element zugreifen, das in HTML (oder einer SVG-Datei) definiert wurde, indem Sie die normalen HTML-Methoden zum Abrufen von Tags, IDs usw. verwenden. Dazu gehören: Document.getElementsByTagName(), Document.getElementById(), Document.querySelector(), Document.querySelectorAll() usw.

Beispielsweise betrachten Sie das untenstehende HTML, das eine SVG-Datei mit einem Style-Element definiert.

<svg
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <style id="circle_style_id">
    circle {
      fill: gold;
      stroke: green;
      stroke-width: 3px;
    }
  </style>
  <circle cx="50" cy="50" r="25" />
</svg>

Um das erste style-Element im ersten svg-Element abzurufen, könnten Sie Document.querySelector() wie unten gezeigt verwenden.

const svg = document.querySelector("svg");
const style = svg.querySelector("style");

Alternativ könnten Sie Document.getElementById() verwenden und die Tag-ID angeben:

const svg = document.querySelector("svg");
const style = svg.getElementById("circle_style_id");

Oder Sie erhalten einfach das Element aus dem Dokument nach ID (in diesem Fall mit document.querySelector()):

const style = document.querySelector("#circle_style_id");

Dieses Beispiel zeigt, wie man die Eigenschaften eines Style-Elements abrufen und festlegen kann, das in diesem Fall in einer SVG-Definition angegeben wurde.

Das HTML enthält eine SVG-Definition für einen <circle> mit einem <style>-Element, zusammen mit einem HTML-<button>-Element, das verwendet wird, um den Stil zu aktivieren und zu deaktivieren, sowie ein HTML-<textarea>-Element zum Protokollieren der Eigenschaftswerte.

<button>Disable</button>
<textarea id="log" rows="6" cols="90"></textarea>
<svg
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <style id="circle_style_id" media="all and (min-width: 600px)">
    circle {
      fill: gold;
      stroke: green;
      stroke-width: 3px;
    }
  </style>
  <circle cx="60" cy="60" r="50" />
</svg>

Beachten Sie, dass wir oben das media-Attribut im style-Tag gesetzt haben. Wir haben type nicht gesetzt, da es veraltet ist, oder disabled, weil es kein solches Attribut gibt (nur die Eigenschaft im Element).

Der folgende Code erhält das style-Element (ein SVGStyleElement) unter Verwendung seiner ID.

const svg = document.querySelector("svg");
const style = svg.getElementById("circle_style_id");

Wir fügen dann eine Funktion hinzu, um die Style-Eigenschaften zu protokollieren. Diese wird nach der Initialisierung, bei jeder Rahmengrößenänderung und wenn der Button gedrückt wird, aufgerufen.

// Get logging text area
const log = document.getElementById("log");

function setLogText() {
  // Log current values of properties
  log.value = `style.media: ${style.media} (frame width: ${window.innerWidth})\n`; // 'all' by default
  log.value += `style.title: ${style.title}\n`; // no default value
  log.value += `style.disabled: ${style.disabled}\n`; // 'false' by default
  log.value += `style.type: ${style.type}\n`; // deprecated (do not use)
  log.value += `style.sheet.rules[0].cssText: ${style.sheet.rules[0].cssText}\n`;
}

// Log initial property values
setLogText();

// Log when the frame resizes
addEventListener("resize", () => {
  setLogText();
});

Zuletzt haben wir einen Ereignishandler für den Button gesetzt. Wenn der Button geklickt wird, wird die disabled-Eigenschaft umgeschaltet. Dies aktualisiert auch das Protokoll und den Button-Text.

const button = document.querySelector("button");

button.addEventListener("click", () => {
  style.disabled = !style.disabled;
  button.textContent = style.disabled ? "Enable" : "Disable";

  // Log after button presses
  setLogText();
});

Das Ergebnis wird unten angezeigt. Schalten Sie den Button um, um das SVG-Style-Element zu aktivieren und zu deaktivieren. Wenn das SVG-Style nicht deaktiviert ist, können Sie auch die Fensterbreite ändern, um die Wirkung der media-Eigenschaft auf den Stil zu sehen, wenn der Rahmen mit dem Live-Beispiel 600px breit ist.

• HTMLStyleElement