css - 使用 JSDOM 编辑 CSS 样式表

Question

我正在尝试对从 Adob​​e Illustrator 导出的 SVG 文件进行一些预处理，以便以后在网络上使用。但是我在编辑一些 CSS 规则时遇到了一些问题。

我有这样的 SVG 文件：

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 2222.68 1406.5" style="enable-background:new 0 0 2222.68 1406.5;" xml:space="preserve">
<style type="text/css">
    .st0{fill:none;stroke:#A0A09F;stroke-miterlimit:10;}
    .st1{fill:#E2E2E1;}
/*more rules*/
</style>
/*<g>s, <path>s and other SVG elements*/
</svg>

我可以在浏览器中打开它并在控制台上执行以下操作：

const styleSheet = document.styleSheets[0];

或者，我可以这样做：

const svgElement = document.body.children[0];
const styleElement = svgElement.children[0];
const styleSheet = styleElement.sheet;

在这两种情况下，我都可以从“styleSheet”中读取“cssRules”属性并操作 SVG 文件中定义的所有规则。当我使用 JSDOM 尝试相同的事情时，我无法访问样式表。document.styleSheets 属性的长度为 0，样式标签没有 sheet 属性（但我可以将其所有规则视为带有 innerHTML 的文本）。

const jsdom = require("jsdom");
const fs = require("fs");
const { JSDOM } = jsdom;
const svgFile = fs.readFileSync("myFile.svg").toString();
const dom = new JSDOM(svgFile);
const document = dom.window.document;

const styleSheet = document.styleSheets[0]; //doesn't work, length is 0

const svgElement = document.body.children[0];
const styleElement = svgElement.children[0];
const styleSheet = styleElement.sheet; //sheet is undefined

无论如何可以使用 JSDOM 访问此规则吗？其他操作，例如向元素添加类和 data-* 属性，可以在 JSDOM 中正常工作。

节点版本：14.7.1

JSDOM 版本：16.6.0

标签： cssnode.jssvgjsdom