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

Question

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

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

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

Answer 1

SVG permits style elements

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