解析javascript中的svg轉換

Question

我想獲得原始變換（40）減去X，然後將g設置爲新的變換值（40-x，20）。解析變換字符串的更好方法是什麼？

<label><input type="checkbox"> Sort values</label> 

<g class="state" transform="translate(40,20)"> 

d3.select("input").on("change", change); 

    function change() { 
d3.selectAll(".state").attr("x",50); 
    var transition = svg.transition().duration(750), 
     delay = function(d, i) { return i * 50; }; 

    transition.selectAll(".state") 
     .attr("transform", function(d) { COOL MAGIC}); 
} 

Answer 1

爲了解析svg的transform屬性，可以有兩種方法。

選項A

//發送Svg爲DOM元素作爲參數傳遞給該函數。它將返回變換字符串的X，Y.

function getTransformString(svgElement){ 
var transformString=svgElement.getAttribute('transform'); 
    if(transformString){ 
     var splitBraces=transformString.split('('); 
     splitBraces=splitBraces[1].split(')'); 
     var splitComma=splitBraces[0].split(','); 
     return { 
      x:splitComma[0], 
      y:splitComma[1] 
      } 
     } 

return null; 

} 

選項B //我會推薦這種方法，因爲它具有最小的DOM操作。在這個選項中，跟蹤局部變量中的Translate X，Y。

var TransformX=0,TransformY=0; 

function setSvgTransform(x,y,svgElement){ 
TransformX=x; 
TransformY=y; 
var translateString='translate('+x+','+y+')'; 
svgElement.setAttribute('transform',translateString); 
} 

function changeSvgTrasform(svgElement){ 
// now here we do not need to parse transform string to get current value of transform. 

var Current_TX=TransformX; 
var Current_TY=TransformY; 

var newTX=Current_TX-40; 

setSvgTransform(newTX,Current_TY,svgElement); 

}