svg transform parsing in javascript

Question

Я хочу получить исходное преобразование (40) минус X, а затем установить g в новое значение tranform. (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, возможны два подхода.

Вариант А

// отправить 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. В этом случае отслеживайте перевод 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); 

}