svg 转换在 javascript 中的解析答案

【问题标题】：svg transform parsing in javascriptsvg 转换在 javascript 中的解析
【发布时间】：2013-07-08 22:56:02
【问题描述】：

我想得到原始变换 (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});
}

【问题讨论】：

很高兴解释您尝试过的内容并提供有效的代码 sn-p。

标签： javascript svg d3.js

【解决方案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);

}

【讨论】：