解析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)");