javascript - 将外部 CSS 作为内联样式应用于 HTML 节点(vanilla Javascript/Coffeescript)

标签 javascript html css svg coffeescript

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

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

我问,因为看起来我唯一的其他选择是将动态样式移植到 JavaScript,引入不必要的刚性(由于需要编辑的多个点而进行更复杂的更新,等等)。

最佳答案

SVG permits style elements .

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

关于javascript - 将外部 CSS 作为内联样式应用于 HTML 节点(vanilla Javascript/Coffeescript),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31351016/

相关文章:

javascript - 在 setTimeout 回调函数中保留 event.clientX 值

javascript - 如何使用 css 列属性调整 <ul> 中的下拉菜单项?

javascript - 当用户刷新网页时阻止表单提交

html - 将 <a> 悬停在 <td> 中更改 <td> 背景图像

jquery - 如何进行 jquery 选项卡自定义

html - 让我的 div 转到页面底部

css - 所有这些 W3C CSS 验证警告都是关于什么的?

javascript - 使用 JS 的数组映射 - 将值与另一个数组进行比较并从第二个数组返回值

javascript - 将 HTML 表转换为 JSON 以传递给 AJAX 调用以下载为 CSV

javascript - 在查看图表值方面需要帮助