将外部 CSS 作为内联样式应用于 HTML 节点（vanilla Javascript/Coffeescript）答案

【问题标题】：Apply External CSS to HTML Nodes as Inline Style (vanilla Javascript/Coffeescript)将外部 CSS 作为内联样式应用于 HTML 节点（vanilla Javascript/Coffeescript）
【发布时间】：2015-09-29 19:23:09
【问题描述】：

所以，我有一个 SVG 文件嵌入到我的 HTML 中，未压缩（保留其原始节点格式）。它包含几个组，除了三个之外，所有组都是隐藏的（display == "none"）。根据用户的选项，我动态切换隐藏组和可见组，利用映射到适当可见性选项的父类。我的目标是获取生成的 SVG 节点，内联与父类对应的应用样式，并在用户完成处理后将其提交给服务器以作为光栅图像处理。

在我获取整个节点树并将其转换为字符串之前，是否有一种快速、跨浏览器兼容的方式来迭代应用于节点的所有样式并将它们内联到脚本中？一个普通的 JavaScript/CoffeeScript 解决方案是理想的。如果需要，可以使用Snap.svg。

我问，因为看起来我唯一的其他选择是将动态样式移植到 JavaScript，引入不必要的僵化（由于需要编辑的多个点等更复杂的更新）。

【问题讨论】：

您可以遍历 window.getComputedStyle() 返回的值并将它们写入元素的 style 属性。

标签： javascript html css svg coffeescript

【解决方案1】：

SVG permits style elements.

您应该能够将定义父类的 CSS 规则放在一个style 元素中在 SVG 中。然后像现在一样切换您的组。如果您现在将整个 SVG 片段发送到您的光栅化器，包括其内部的 style 标签，它将包含所有必要的 CSS 信息，并且应该能够正确呈现 SVG，无需遍历整个树并内联所有样式。

【讨论】：