解析SVG变换属性用JavaScript

Question

假设我们有一个SVG变换字符串：

transform = "translate(6,5),scale(3,3)"; 

有没有我们可以用它来解析成有用的东西漂亮的正则表达式的功能？

Answer 1

这里的代码一个漂亮的小片段，可能会得到你所需要的，它应该涵盖大多数情况下如果你打算解析字符串有不同数目的参数：

function parse (a) 
{ 
    var b={}; 
    for (var i in a = a.match(/(\w+\((\-?\d+\.?\d*e?\-?\d*,?)+\))+/g)) 
    { 
     var c = a[i].match(/[\w\.\-]+/g); 
     b[c.shift()] = c; 
    } 
    return b; 
} 

运行此

parse('translate(6,5),scale(3,3.5),a(1,1),b(2,23,-34),c(300)'); 

会导致这样的：

{ 
    translate: [ '6', '5' ], 
    scale: [ '3', '3.5' ], 
    a: [ '1', '1' ], 
    b: [ '2', '23', '-34' ], 
    c: [ '300' ] 
} 

Answer 2

var transform = "translate(6,5),scale(3,3)"; 
var translate = /translate\(\s*([^\s,)]+)[ ,]([^\s,)]+)/.exec(transform); 
var translateX = translate[1] 
var translateY = translate[2] 
var scale = /scale\(\s*([^\s,)]+)[ ,]([^\s,)]+)/.exec(transform); 
var scaleX = translate[1] 
var scaleY = translate[2] 

transformValues = {translate:{x:translateX,y:translateY}, 
scale:{x:scaleX,y:scaleY}} 

相当严重，但@icedwater是让我做所有自己，所以...

Answer 3

我要在此一刺，说你希望它被解析成含有一个JSON对象工作每个属性作为列表中的条目。这是迄今为止我来最接近：

function listIntoJSON(theTransformInQuestion) { 

    // let's work with transform = "translate(6,5),scale(3,3)" as specified. 
    var result = []; // empty list to be returned 
    var splitList = theTransformInQuestion.split(/\W/); 
    // now splitList is ["translate", "6", "5", "", "scale", "3", "3", ""] 

    for (var t = 0; t < splitList.length; t += 4) { 
     var op = {}; 
     op.name = splitList[t]; 
     op.x = splitList[t + 1]; 
     op.y = splitList[t + 2]; 
     result.push(op); // add op to the result list 
    } 
    return result; 
} 

将于

transform = "translate(6,5),scale(3,3)"; 

，并返回

[ 
    {name: "translate", x: "6", y: "5"}, 
    {name: "scale", x: "3", y: "3"} 
] 

，应该对任何数量的变换工作。黑客的位，但它现在会做。

Answer 4

从@chernjie改编的解决方案：

function parse_transform(a) { 
    var b = {}; 
    for (var i in a = a.match(/(\w+)\(([^,)]+),?([^)]+)?\)/gi)) { 
     var c = a[i].match(/[\w\.\-]+/g); 
     b[c.shift()] = c; 
    } 
    return b; 
} 

Answer 5

假设您在浏览器中运行，还可以使用SVG DOM来解析和解码变换字符串。

var svgns = "http://www.w3.org/2000/svg"; 
 

 
function getTransformList(transformStr) 
 
{ 
 
    // Create a fake <rect> element to set the transform to 
 
    var rect = document.createElementNS(svgns, "rect"); 
 
    rect.setAttribute("transform", transformStr); 
 
    // Use the DOM to get the list of decoded transforms 
 
    dumpTransform(rect.transform.baseVal); 
 
} 
 

 
function dumpTransform(transformList) 
 
{ 
 
    for (var i=0; i<transformList.length; i++) 
 
    { 
 
    var transform = transformList[i]; 
 
    var m = transform.matrix; 
 
    switch (transform.type) 
 
    { 
 
     case 2: 
 
     console.log("translate("+m.e+","+m.f+")"); 
 
     break; 
 
     case 3: 
 
     console.log("scale("+m.a+","+m.d+")"); 
 
     break; 
 
     case 4: 
 
     console.log("rotate("+transform.angle+")"); 
 
     // TODO need to also handle rotate(angle, x, y) form 
 
     break; 
 
     case 5: 
 
     // TODO skewX() 
 
     break; 
 
     case 6: 
 
     // TODO skewY(() 
 
     break; 
 
     case 1: 
 
     default: 
 
     console.log("matrix("+m.a+","+m.b+","+m.c+","+m.d+","+m.e+","+m.f+")"); 
 
     break; 
 
    } 
 
    } 
 
} 
 

 
getTransformList("translate(6,5),scale(3,3)");