将 class 样式替换为内联样式

Question

我有 svg 图像，其中有一些 classes（jointJS 论文）。我正在保存这个 svg，然后在后端将其转换为 png 文件。问题是 - 我后端的 classes 无法被识别，所以我想用分配给这些 classes 的样式替换 class 名称，例如

<g id=\"j_42\" model-id=\"7c170ce6-09a5-49e9-b470-c1bb1980bd02\" class=\"link joint-theme-default\"><path class=\"connection\" stroke=\"#222\" d=\"M 803 387 C 881 387 881 196 959 196\" id=\"v-522\" stroke-width=\"3\"/>

<g id=\"j_42\" model-id=\"7c170ce6-09a5-49e9-b470-c1bb1980bd02\" style="some_styles_that_stands_for joint-theme-default class"><path class=\"connection\" stroke=\"#222\" d=\"M 803 387 C 881 387 881 196 959 196\" id=\"v-522\" stroke-width=\"3\"/

Answer 1

你只需要写成style="height: 50px; width: 100px; background-color: blue"。这是一种管理起来的痛苦，因此您可能想研究另一种应用这些样式的方法，但这就是您将它们写出来的方式。

Answer 2

您可以使用 document.styleSheets 读取所有样式表，找到您想要的所有 class 规则，并将元素的 class 属性替换为样式表中的样式定义。

我这边做的基本上是得到：

获取第一个样式表（您基本上可以遍历所有样式表如果你喜欢）
遍历所有规则（假设所有选择器都是 class 选择器）
将这些规则保存在对象中以便更轻松地访问它们稍后
遍历所有矩形元素
获取该元素的所有 class 名称的列表
从先前生成的映射器对象中获取每个class名称的样式定义
连接这些定义
删除 class 属性
将样式属性值设置为来自 7 的串联字符串。

这样你就可以结束 rect 元素，这些元素的 class 名称被内联样式替换...

P.S:: 我知道我在这里做了很多假设。要使它为您工作，或者在一般情况下工作，还有很多工作要做...

classMap = {}
var rules = document.styleSheets[0].cssRules // 1. get first stylesheet
for (var j = 0; j < rules.length; j++) { // 2. loop over all rules
  var selector = rules[j].selectorText
  var csstext = rules[j].cssText
  classMap[selector.replace(".", "")] = csstext.split("{")[1].replace("}", "") // 3. save class name and rule text to mapper object
}

document.querySelectorAll("rect").forEach(function(item, index) { // 4. loop over all rects
  var style = ""
  item.classList.forEach(function(className) { // 5. loop over all class names
    style += classMap[className] // 6. + 7. get style rules form mapper and concat
  })
  item.removeAttribute("class") // 8. remove class
  item.setAttribute("style", style) // 9. add inline style
  document.write("<br/>" + item.id + ": " + style)
})

.cl1 {
  fill: green
}
.cl2 {
  fill: red
}
.st1 {
  stroke: blue;
  stroke-width: 10
}
.st2 {
  stroke: orange;
  stroke-width: 5
}

<svg>
  <rect id="rect1" x="10" y="10" width="100" height="100" class="cl1 st1" />
  <rect id="rect2" y="10" x="150" width="100" height="100" class="cl2 st2" />
</svg>

另一种方法是使用 getComputedStyle 来获取样式定义。这更简单，适用于一般情况，但会很快使您的文档膨胀...

为了防止这种情况（并防止您运行陷入某些 chrome 错误...）您可以维护您感兴趣的所有样式属性的列表，并仅获取当前值这些属性来自 getComputedStyle

var props = ["fill", "stroke", "stroke-width"]

document.querySelectorAll("rect").forEach(function(item, index) {
  var cstyle = getComputedStyle(item)
  props.forEach(function(prop) {
    item.setAttribute(prop, cstyle[prop])
  })
  item.removeAttribute("class")
  var X = new XMLSerializer()
  var txt = document.createTextNode(X.serializeToString(item))
  document.write("<br/><br/>")
  document.body.appendChild(txt)
})

.cl1 {
  fill: green
}
.cl2 {
  fill: red
}
.st1 {
  stroke: blue;
  stroke-width: 10
}
.st2 {
  stroke: orange;
  stroke-width: 5
}

<svg>
  <rect id="rect1" x="10" y="10" width="100" height="100" class="cl1 st1" />
  <rect id="rect2" y="10" x="150" width="100" height="100" class="cl2 st2" />
</svg>

将 class 样式替换为内联样式

Replacing class styles with inline styles

css

arrays

svg

jointjs

imagemagick-convert