Skip to content

Instantly share code, notes, and snippets.

@Ma5onic
Forked from benbarnett/raphael-svg-buildjson
Created February 10, 2022 04:02
Show Gist options
  • Save Ma5onic/de285d4f05f8bdd8e08251af43359049 to your computer and use it in GitHub Desktop.
Save Ma5onic/de285d4f05f8bdd8e08251af43359049 to your computer and use it in GitHub Desktop.
loop through the 'paper' variable from Raphael JS and build up the JSON object describing all images and paths within it.
// loop through the 'paper' variable from Raphael JS and build up the JSON object describing all images and paths within it.
buildJSON = function(paper) {
var svgdata = [];
svgdata.push({
width: 390,
height: 400
});
$.each(paper,
function(i, o) {
var node = o;
if (node.type == "image") {
var object = {
type: node.type,
width: node.attrs['width'],
height: node.attrs['height'],
x: node.attrs['x'],
y: node.attrs['y'],
src: node.attrs['src'],
transform: node.transformations ? node.transformations.join(' ') : ''
}
}
if (node.type == "path") {
var path = "";
$.each(node.attrs['path'],
function(i, group) {
$.each(group,
function(index, value) {
if (index < 1) {
path += value;
}
else {
if (index == (group.length - 1)) {
path += value;
}
else {
path += value + ',';
}
}
});
});
var object = {
type: node.type,
fill: node.attrs['fill'],
opacity: node.attrs['opacity'],
translation: node.attrs['translation'],
scale: node.attrs['scale'],
path: path,
stroke: node.attrs['stroke'] === 0 ? 'none': node.attrs['stroke'],
transform: node.transformations ? node.transformations.join(' ') : ''
}
}
svgdata.push(object);
});
$('#output').val(JSON.stringify(svgdata));
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment