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

}