SVGStyleElement

Интерфейс SVGStyleElement соответствует элементу SVG <style>.

Этот интерфейс также наследует свойства от своего родительского интерфейса, SVGElement.

SVGStyleElement.type Устаревший

Строка, соответствующая атрибуту type данного элемента.

SVGStyleElement.media

Строка, соответствующая атрибуту media данного элемента.

SVGStyleElement.title

Строка, соответствующая атрибуту title данного элемента.

SVGStyleElement.sheet Только для чтения

Возвращает объект CSSStyleSheet, связанный с данным элементом, или null если такого объекта нет.

SVGStyleElement.disabled

Логическое значение, указывающее, отключен ли связанный стилевой лист.

Этот интерфейс не реализует каких-либо конкретных методов, но наследует методы от своего родительского интерфейса, SVGElement.

Для динамического создания элемента SVG style (SVGStyleElement), необходимо использовать Document.createElementNS(), указав элемент style в пространстве имён SVG.

Учитывая следующий элемент SVG:

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

Вы можете создать элемент SVG style следующим образом:

// 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);

Вы можете получить доступ к элементу SVG style, определённому в HTML (или файле SVG), используя обычные HTML методы для получения тегов, идентификаторов и так далее. К ним относятся: Document.getElementsByTagName(), Document.getElementById(), Document.querySelector(), Document.querySelectorAll() и так далее.

Например, рассмотрим HTML ниже, который определяет файл SVG с элементом style.

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

Чтобы получить первый элемент style в первом элементе svg, вы можете использовать Document.querySelector() следующим образом.

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

В качестве альтернативы вы можете использовать Document.getElementById(), указав идентификатор тега:

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

Или просто получить элемент из документа по идентификатору (в этом случае используя document.querySelector()):

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

Этот пример демонстрирует, как получить и установить свойства элемента style, который в данном случае был задан в определении SVG.

HTML содержит определение SVG для <circle> с элементом <style>, а также элемент HTML <button>, который будет использоваться для включения и отключения стиля, и элемент HTML <textarea> для регистрации значений свойств.

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

Обратите внимание, что выше мы установили атрибут media на теге style. Мы не установили type, так как он устарел, или disabled, потому что такого атрибута нет (есть только свойство на элементе).

Код ниже получает элемент style (элемент SVGStyleElement) по его идентификатору.

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

Затем мы добавляем функцию для регистрации свойств стиля. Она вызывается после инициализации, при каждом изменении размеров фрейма и при нажатии кнопки.

// 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();
});

Наконец, мы устанавливаем обработчик события для кнопки. При нажатии кнопки свойство disabled переключается. Это также обновляет журнал и текст кнопки.

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

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

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

Результат показан ниже. Переключайте кнопку для включения и отключения элемента SVG style. Если стиль SVG не отключен, вы также можете изменить ширину окна, чтобы увидеть эффект свойства media на стиль, когда ширина фрейма с примером составляет 600px.

• HTMLStyleElement