css - 用内联样式替换类样式

Question

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

<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

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

我在这里所做的基本上是获取:

1. 获取第一个样式表(你基本上可以遍历所有样式表 如果你喜欢的话)
2. 遍历所有规则(假设所有选择器都是类 选择器)
3. 将这些规则保存在对象中以便更轻松地访问它们 稍后
4. 遍历所有的矩形元素
5. 获取该元素所有类名的列表
6. 从之前生成的mapper对象中获取每个类名的样式定义
7. 连接这些定义
8. 删除类属性
9. 将样式属性值设置为 7 中的串联字符串。

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

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>