javascript - svg 在 javascript 中的转换解析

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 的变换属性，可以有两种方法。

选项 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);

}