解析 SVG 字符串时，CSSStyleSheet class 消失

Question

示例： JSFiddle

我有一个带有样式元素的svg图像

<svg ...>
  <style>
    ...
  </style>
  ...
</svg>

如果我将 svg 嵌入到一个空的 HTML 文档中，这两段代码会产生我没有预料到的差异。

区块#1

let svg = document.querySelector("svg")

区块#2

let s = new XMLSerializer();
let p = new DOMParser();
let svg = p.parseFromString(s.serializeToString(document.querySelector("svg")), "image/svg+xml").documentElement;

这两个块在<style>子项（此处为 .children[0]）方面产生了差异。 CSSStyleSheet通常位于<style>子元素的“sheet”属性中：

svg.children[0].sheet

• 在块 #1 中，“sheet”属性可用。
• 在块 #2 中，它是null 。

为什么是这样？ 我在第 2 块做错了什么吗？ <style>子项在这两种情况下都存在，只是在块 #2 中未被识别为 CSSStyleSheet。

---

所有这一切的目的是我正在构建一个 SVG 解析器，因此我需要能够将文件作为字符串加载并解析它们。

解决方法？：在这两种情况下，我都可以获得<style>元素的 innerHTML，但是CSSStyleSheet没有一个简单的构造函数，我可以在其中传递整个字符串； 那太好了，我可以构造一个新的 CSSStyleSheet。 我可以创建一个 CSSStyleSheet 并单独添加规则，但我认为我需要解析 CSS，这听起来很难。

我只想要CSSRuleList的好处。 能够迭代它是非常有帮助的。

Answer 1

我找到了解决方案。 它没有很好的记录

<style>元素必须是 HTMLDocument 的子元素（不是 XMLDocument，也不是无父元素），“sheet”属性才能存在并且属于 CSSStyleSheet 类型。

这是以前在这个问题中发现的。

---

解决方案（摘要）

append <style>元素到 window.document.body，然后访问“sheet”属性。

解决方案（详细）

1. 获取<style>元素的根父节点（循环.parentNode直到到达根节点）。
2. 使用root.constructor === window.HTMLDocument检查根的类型。

（您不能针对 null 进行测试，因为 XMLDocument 不会生成“工作表”属性）

如果#2 为真，则“sheet”属性将存在。 如果为假，继续：

3. append <style>到 document.body。 （或者<svg>如果它包含样式。两者都有效）
4. 工作表属性现在存在。 用它做任何你需要的事。
5. 从 document.body 中删除<style> 。