Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Parse transform SVG attribute
String.prototype.parseTransform = function() {
var prop = ['translate', 'matrix', 'rotate', 'skewX', 'skewY', 'scale'];
var val = this.match(/(translate|matrix|rotate|skewX|skewY|scale)\(.*?\)/g);
var obj = {};
if (val) {
for (var i = 0, length = val.length; i < length; i++) {
var item = val[i];
var index = item.indexOf('(');
var v = item.substring(index + 1, item.length - 1).split(/\,|\s/);
var n = item.substring(0, index);
obj[n] = {};
switch (n) {
case 'translate':
case 'scale':
obj[n].x = +v[0] || 0;
obj[n].y = +v[1] || 0;
break;
case 'rotate':
obj[n].a = +v[0] || 0;
obj[n].x = +v[1] || 0;
obj[n].y = +v[2] || 0;
break;
case 'skewX':
case 'skewY':
obj[n].a = +v[0];
break;
case 'matrix':
obj[n].a = +v[0] || 0;
obj[n].b = +v[1] || 0;
obj[n].c = +v[2] || 0;
obj[n].d = +v[3] || 0;
obj[n].e = +v[4] || 0;
obj[n].f = +v[5] || 0;
break;
}
}
}
obj.toString = function() {
var builder = [];
for (var i = 0, length = prop.length; i < length; i++) {
var n = prop[i];
var o = this[n];
if (!o)
continue;
switch (n) {
case 'translate':
case 'scale':
builder.push(n + '(' + o.x + ',' + o.y + ')');
break;
case 'rotate':
builder.push(n + '(' + o.a + ' ' + o.x + ' ' + o.y + ')');
break;
case 'skewX':
case 'skewY':
builder.push(n + '(' + o.a + ')');
break;
case 'matrix':
builder.push(n + '(' + o.a + ',' + o.b + ',' + o.c + ',' + o.d + ',' + o.e + ',' + o.f + ')');
break;
}
}
return builder.join(' ');
};
return obj;
};
@atamocius

This comment has been minimized.

Copy link

atamocius commented Jan 25, 2018

Thank you for sharing this.

I just want to point out a possible bug: default values for parsing scale should be 1 instead of 0, otherwise, you might parse scale(0.75) as scale(0.75 0).

When I used this, I modified the switch by separating the cases for translate and scale.

case 'translate':
    obj[n].x = +v[0] || 0;
    obj[n].y = +v[1] || 0;
    break;
case 'scale':
    obj[n].x = +v[0] || 1;
    obj[n].y = +v[1] || 1;
    break;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.