SVGStyleElement

SVGStyleElement 接口对应于 SVG 的 <style> 元素。

实例属性

此接口还从其父接口 SVGElement 继承属性。

SVGStyleElement.type 已弃用: 与给定元素的 type 属性相对应的字符串。
SVGStyleElement.media: 与给定元素的 media 属性相对应的字符串。
SVGStyleElement.title: 与给定元素的 title 属性相对应的字符串。
SVGStyleElement.sheet 只读: 返回与给定元素关联的 CSSStyleSheet 对象，如果不存在则返回 null。
SVGStyleElement.disabled: 一个布尔值，指示关联的样式表是否被禁用。

实例方法

此接口不实现任何特定方法，但从其父接口 SVGElement 继承方法。

示例

动态添加 SVG 样式元素

要动态创建 SVG 样式元素 (SVGStyleElement)，您需要使用 Document.createElementNS()，在 SVG 命名空间中指定 style 元素。

注意： Document.createElement() 不能用于创建 SVG 样式元素（它返回一个 HTMLStyleElement）。

给定以下 SVG 元素

html

<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 样式元素

// 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 样式

您可以使用获取标签、ID 等等的正常 HTML 方法访问在 HTML（或 SVG 文件）中定义的 SVG 样式元素。这些方法包括：Document.getElementsByTagName()、Document.getElementById()、Document.querySelector()、Document.querySelectorAll() 等等。

例如，考虑以下 HTML，它定义了一个带有样式元素的 SVG 文件。

html

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

要获取第一个 svg 元素中的第一个 style 元素，您可以使用下面显示的 Document.querySelector()。

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

或者，您可以使用 Document.getElementById()，指定标签 ID

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

或者，只需从文档中获取元素的 ID（在本例中使用 document.querySelector()）

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

获取和设置属性

此示例演示了如何获取和设置样式元素的属性，在本例中，样式元素是在 SVG 定义中指定的。

HTML

HTML 包含一个用于 <circle> 的 SVG 定义，其中包含一个 <style> 元素，以及一个 HTML <button> 元素，它将用于启用和禁用样式，以及一个 HTML <textarea> 元素，用于记录属性值。

html

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

请注意，我们在 style 标签上设置了 media 属性。我们没有设置 type，因为它已弃用，也没有设置 disabled，因为没有这样的属性（只有元素上的属性）。

JavaScript

下面的代码使用其 ID 获取 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 样式元素。如果 SVG 样式未被禁用，您还可以调整窗口宽度以查看当包含实时示例的框架宽度为 600 像素时，media 属性对样式的影响。

规范

规范
可缩放矢量图形 (SVG) 2 # InterfaceSVGStyleElement

浏览器兼容性

BCD 表只在浏览器中加载

另请参见

HTMLStyleElement