用js将svg格式的文件,转成json格式,然后再用js输出成svg格式。
时间: 2023-07-04 15:28:40 浏览: 122
将SVG文件转换为JSON可以使用JavaScript中的`xml2json`库。该库可以将XML文件转换为JSON格式,从而使得可以在JavaScript中轻松地操作SVG文件的属性和元素。
以下是一个将SVG文件转换为JSON格式的简单示例:
```javascript
const svg = '<svg><rect x="10" y="10" width="100" height="100"/></svg>';
const json = xmlToJson(svg);
console.log(json);
```
接下来,使用JavaScript中的`JSON.stringify()`函数将JSON格式的数据转换回SVG格式。
```javascript
const svg = '<svg><rect x="10" y="10" width="100" height="100"/></svg>';
const json = xmlToJson(svg);
const newSvg = jsonToXml(json);
console.log(newSvg);
```
您可以使用以下代码实现上述功能:
```javascript
function xmlToJson(xml) {
// Create the return object
var obj = {};
if (xml.nodeType === 1) {
// element
// do attributes
if (xml.attributes.length > 0) {
obj["@attributes"] = {};
for (var j = 0; j < xml.attributes.length; j++) {
var attribute = xml.attributes.item(j);
obj["@attributes"][attribute.nodeName] = attribute.nodeValue;
}
}
} else if (xml.nodeType === 3) {
// text
obj = xml.nodeValue;
}
// do children
if (xml.hasChildNodes()) {
for (var i = 0; i < xml.childNodes.length; i++) {
var item = xml.childNodes.item(i);
var nodeName = item.nodeName;
if (typeof obj[nodeName] == "undefined") {
obj[nodeName] = xmlToJson(item);
} else {
if (typeof obj[nodeName].push == "undefined") {
var old = obj[nodeName];
obj[nodeName] = [];
obj[nodeName].push(old);
}
obj[nodeName].push(xmlToJson(item));
}
}
}
return obj;
}
function jsonToXml(json) {
var xml = "";
for (var prop in json) {
if (prop == "@attributes") {
for (var attr in json[prop]) {
xml += " " + attr + '="' + json[prop][attr] + '"';
}
} else if (prop == "#text") {
xml += json[prop];
} else if (json[prop] instanceof Array) {
for (var i = 0; i < json[prop].length; i++) {
xml += "<" + prop + ">" + jsonToXml(json[prop][i]) + "</" + prop + ">";
}
} else {
xml += "<" + prop + ">" + jsonToXml(json[prop]) + "</" + prop + ">";
}
}
return xml;
}
```
请注意,这只是一个简单的示例,可能无法处理所有的SVG文件,但是对于大多数文件都是可以正常工作的。