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读取所有样式表，找到所需的所有类规则，并使用样式表中的样式定义替换Elemets的class属性。

我在这里做的基本上是：

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

使用这个结尾的rect元素将其类名替换为内联样式...

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

＆＃13;

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)
})

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

为了防止这种情况（并防止你遇到某些Chrome错误...），你可以维护一个你感兴趣的所有样式属性的列表，并从getComputedStyle <获取这些属性的当前值/ p>

＆＃13;

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)
})

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

你只需要在style =“height：50px; width：100px; background-color：blue”中编写它们。这是一种难以管理的问题，因此您可能希望研究应用这些样式的另一种方式，但这就是您将它们写出来的方式。

用内联样式替换类样式

2 个答案: